JavaScript HTML DOMノードリスト
HTML DOM NodeListオブジェクト
NodeListオブジェクトは、ドキュメントから抽出されたノードのリスト(コレクション)です。
NodeListオブジェクトは、HTMLCollectionオブジェクトとほぼ同じです。
一部の (古い) ブラウザは、getElementsByClassName()などのメソッドに対してHTMLCollectionの代わりにNodeListオブジェクトを返します。
すべてのブラウザは、プロパティchildNodesのNodeListオブジェクトを返します。
ほとんどのブラウザは、querySelectorAll()メソッドのNodeListオブジェクトを返します。
次のコードは、ドキュメント内のすべての<p>ノードを選択します。
例
NodeList内の要素には、インデックス番号でアクセスできます。
2番目の<p>ノードにアクセスするには、次のように記述できます。
注：インデックスは0から始まります。
HTML DOMノードリストの長さ
lengthプロパティは、ノード リスト内のノードの数を定義します。
lengthプロパティは、ノードリスト内のノードをループする場合に便利です。
例
ノードリスト内のすべての<p>要素の色を変更します。
HTMLCollectionとNodeListの違い
NodeListとHTMLcollectionはほぼ同じものです。
どちらも、文書から抽出されたノード(要素)の配列のようなコレクション(リスト)です。ノードにはインデックス番号によってアクセスできます。インデックスは0から始まります。
どちらも、リスト(コレクション)内の要素の数を返すlengthプロパティを持っています。
HTMLCollectionは、ドキュメント要素のコレクションです。
NodeListは、ドキュメントノード(要素ノード、属性ノード、およびテキストノード)のコレクションです。
HTMLCollectionアイテムには、名前、ID、またはインデックス番号でアクセスできます。
NodeList項目は、インデックス番号によってのみアクセスできます。
HTMLCollectionは常にライブコレクションです。例:DOM内のリストに<li>要素を追加すると、HTMLCollection内のリストも変更されます。
NodeListは、ほとんどの場合、静的コレクションです。例:DOM内のリストに<li>要素を追加しても、NodeList内のリストは変更されません。
getElementsByClassName()メソッドとgetElementsByTagName()メソッドは、ライブHTMLCollectionを返します。
querySelectorAll()メソッドは静的なNodeList を返します。
childNodesプロパティは、ライブNodeListを返します。
配列ではありません!
NodeListは配列のように見えるかもしれませんが、そうではありません。
NodeListをループして、そのノードをインデックスで参照できます。
ただし、NodeListでは、push()、pop()、join() などのArrayメソッドを使用できません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。