DOMについて


What is the DOM?
DOMはDocument Object Modelの略で、JavaScriptオブジェクトを扱うようにHTML要素を操作できるモデルです.
HTMLはプログラミングのために作成された言語ではないため、以前に学習した条件文や重複文を使用することはできず、情報を格納するのにも適していません.したがって,javascriptというプログラミング言語とDOMを用いてHTMLにアクセスし操作する.
📝きょう習った
  • DOMの概念
  • DOMの構造を理解し、HTMLとDOMの類似性を理解する
  • HTMLからJavascriptファイルをロードする際の注意点:スクリプトタグの適用場所が実行結果の違いをもたらす可能性があることが理解できます(スクリプトタグが終了する前に挿入するとHTMLページが正常に使用されます)
  • 詳細
      <html>
      <body>
        <div id="nav">
          <div class="logo"></div>
          <div class="menu-wrapper">
            <div class="menu"></div>
            <div class="menu"></div>
            <div class="menu"></div>
            <div class="profile-photo"></div>
          </div>
        </div>
        <div id="news-contents">
          <div class="news-content-wrapper">
            <div class="news-picture"></div>
            <div class="news-title"></div>
            <div class="news-description"></div>
          </div>
        </div>
        <div id="footer"></div>
      </body>
    </html>

  • console.ロゴじゃなくてconsoledirを使用してDOMをオブジェクトの外観として出力します.

  • document.クエリーbodyには複数のプロパティが表示されます.
    オブジェクトからドキュメントへ.body.childrenを入力するとbodyのサブ要素が見つかります.

  • 複数のサブアイテムの最初のサブアイテムをクエリーします.body.children[1]を入力