#4. DOM Manipulation

10392 ワード
TIL JavaScript API テキストリンク

What is the DOM?


Document Object Modelの略で、HTMLまたはXMLドキュメントとインタラクティブに表示されるAPI.DOMは、ブラウザにロードされ、ノードツリーで表されるドキュメントモデルです.

DOMの特性


Web上で最も一般的なAPI
DOMオブジェクトはノードオブジェクトを継承します.
HTML>Body>ハイパーリンクまたはその他のページ

DOMの使用

  • を制御するHTML要素を検索します.
    • 制御
  • 要素(メソッドやイベントリスナーなど)

    • DOMのタイプ

  • DOM Document
  • DOM Events
  • DOM Elements(Anchor, Area, Base ...)
    HTML codes 
    •       <div class="container">
        <ul class="slider_container" id="slider">
          <li class="slide"><img src = "images/front.png" width = 800px></li>
          <li class="slide"><img src = "images/background1.jpg" width = 800px></li>
          <li class="slide"><img src = "images/biceps.jpg" width = 800px></li>
          <li class="slide"><img src = "images/barrel.jpg" width = 800px></li>
        </ul>

        <a href="#" id="prev">
          <i class="fas fa-arrow-left"></i>
        </a>
        <a href="#" id="next">
          <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    JS codes
    <body>
<input type="text" value="jaypark" />
<a href="https://j-bback.github.io/MyHomepage/About.html">홈페이지</a>
</body>
    Inputタグの宣言にはHTML InputElementというオブジェクトがあります.
    親オブジェクトは、HTML Element->Element->ノード->Objectの順です.

    ノード関係API
    var slideWrap = document.querySelector('.container'),
    slideContainer = document.querySelector('.slider_container'),
    slide = document.querySelectorAll('.slide')
    211014データ構造とアルゴリズム(7)
    Jackson 2ノート