HTML DOM NodeList 参考マニュアル
- 前のページ HTML コレクション
- 次のページ HTML DOMTokenList
NodeList
NodeListはノードオブジェクトの配列に似た集合（リスト）です。
NodeList内のノードはインデックスでアクセスできます（0から始まる）。
length属性NodeList内のノード数を返します。
属性とメソッド
NodeList上で以下の属性とメソッドを使用できます：
| 名前 | 説明 |
|---|---|
| entries() | リストからキー/値対を持つイテレータを返します。 |
| forEach() | リストの各ノードに対してコールバック関数を実行します。 |
| item() | 指定されたインデックスのノードを返します。 |
| keys() | リストのキーを使用してイテレータを返します。 |
| length | NodeList内のノード数を返します。 |
| values() | リストの値を使用してイテレータを返します。 |
インスタンス
ドキュメント内のすべての <p> ノード：
const myNodeList = document.querySelectorAll("p");
NodeListの要素はインデックス番号でアクセスできます。
第2つの <p> ノードにアクセスする場合は、以下のように書きます：
myNodeList[1]
注意：インデックスは0から始まります。
HTML DOM ノードリスト長
length 属性はノードリスト内のノードの数を定義します：
例 1
myNodelist.length
ノードリストのノードを巡る必要がある場合、length 属性は非常に役立ちます：
例 2
変更するノードリスト中のすべての <p> 要素の色：
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
配列ではありません
NodeListは配列ではありません！
NodeListは配列のように見えるかもしれませんが、実際にはそうではありません。
NodeListを遍历し、そのノードをインデックスで参照して使用できます。
ただし、NodeList上ではpush()、pop()、join()などのArrayメソッドを使用することはできません。
HTMLCollectionとNodeListの違い
NodeList と HTMLcollection 非常に似ています。
どちらもドキュメントから抽出されたノード（要素）で構成された类似配列の集合（リスト）です。ノードはインデックス番号を通じてアクセスできます。インデックスは0から始まります。
どちらも length属性であり、リスト（コレクション）内の要素の数を返します。
HTMLCollectionはドキュメント要素の集合です。
NodeListはドキュメントノード（要素ノード、属性ノード、テキストノード）の集合。
HTMLCollectionの項目は、その名前、id、またはインデックス番号を通じてアクセスできます。
NodeListの項目は、そのインデックス番号を通じてのみアクセスできます。
HTMLCollectionは常に、リアルタイムのコレクションです。例えば、<li>要素がDOM内のリストに追加された場合、HTMLCollection内のリストも変更されます。
NodeListは通常、静的なコレクション。例えば、<li>要素がDOM内のリストに追加された場合、NodeList内のリストは変更されません。
getElementsByClassName() および getElementsByTagName() メソッドはリアルタイムの HTMLCollection を返します。
querySelectorAll() メソッドは静的な NodeList を返します。
childNodes 属性はリアルタイムの NodeList を返します。
リアルタイムのノードリスト
ある場合には、NodeList はリアルタイムの：DOM 内の変更は NodeList を更新します。
childNodes メソッドはリアルタイムの NodeList を返します。
- 前のページ HTML コレクション
- 次のページ HTML DOMTokenList
