DOMとは
- Document Object Model のこと。
- APIである（HTMLおよびXMLドキュメント制御のための）。
- JavaScriptとDOMは分かれて扱われている。
DOMツリーとノード
- WebページはDocumentオブジェクトによって表されており、ブラウザがwebページにアクセスしHTMLを解析すると、文書の内容を表すオブジェクトのツリー構造が構築される。
- この構造のことをDOMツリー（またはドキュメントツリー）という。
- DOMツリーを形成する一つ一つのオブジェクトをノード（Node）という。
- 最上位のノードはDocumentノード。
- この下にその他のノードが階層的につながっている。
- 要素ノードはHTMLページの要素を表し、テキストノードは要素の中に記述されているテキストを表す。
- この他にもコメントを表すコメントノードなどいくつものノードの種類がある。
出典：Let'sプログラミング / DOMとは
ノードオブジェクトの取得
console.log(document.lastChild.lastChild.childNodes[5]);
console.log(document.firstElementChild.lastElementChild.children[1]);
このような書き方があるけど、ちょっと使いづらい。そこで・・・
IDから取得
document.getElementById('id名');
クラス名から取得
document.getElementsByClassName('クラス名');
selectors APIから取得
document.querySelector('セレクタ');
document.querySelectorAll('セレクタ');
など色々用意されている。
詳細は下記記事にわかりやすく書かれています。▼
【DOM基礎】ノードの取得／属性の取得・設定
HTMLCollectionとNodeList
HTMLCollection
- document.getElementsBy 〜 のようなメソッドで取得できる配列風のオブジェクトのこと。
- 後から要素の数が増減しても、動的に反映される。
NodeList
- document.querySelectorAll() で取得できる配列風のオブジェクトのこと。
- 要素の数が変わっても、後からそれが反映されない。
HTMLCollectionとNodeListの見分け方
- constructorプロパティを使う。
- （console.logで中身を出力するだけでも分かる）
const divs1 = document.getElementsByTagName('div');
const divs2 = document.querySelectorAll('div');
console.log(divs1.constructor); // -> ƒ HTMLCollection() { [native code] }
console.log(divs2.constructor); // -> ƒ NodeList() { [native code] }