#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')

Reference

この問題について(#4. DOM Manipulation), 我々は、より多くの情報をここで見つけました https://velog.io/@qwerzxcvss/4.-DOM-Manipulation

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

211014データ構造とアルゴリズム(7)

Jackson 2ノート