JavaScript HTMLDOMノードリスト
HTML DOMNodeListオブジェクト
NodeList
オブジェクトは、ドキュメントから抽出されたノードのリスト(コレクション)です。
オブジェクトはNodeList
オブジェクトとほとんど同じHTMLCollection
です。
一部の(古い)ブラウザは、などのメソッドに対してHTMLCollectionではなくNodeListオブジェクトを返しますgetElementsByClassName()
。
すべてのブラウザは、プロパティのNodeListオブジェクトを返しますchildNodes
。
ほとんどのブラウザは、メソッドのNodeListオブジェクトを返しますquerySelectorAll()
。
次のコード<p>
は、ドキュメント内のすべてのノードを選択します。
例
const myNodeList = document.querySelectorAll("p");
NodeListの要素には、インデックス番号でアクセスできます。
2番目の<p>ノードにアクセスするには、次のように記述できます。
myNodeList[1]
注:インデックスは0から始まります。
HTMLDOMノードリストの長さ
このlength
プロパティは、ノードリスト内のノードの数を定義します。
例
myNodelist.length
このlength
プロパティは、ノードリスト内のノードをループする場合に役立ちます。
例
ノードリスト内のすべての<p>要素の色を変更します。
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
HTMLCollectionとNodeListの違い
(HTMLCollection
前の章)は、HTML要素のコレクションです。
ANodeList
はドキュメントノードのコレクションです。
NodeListとHTMLコレクションはほとんど同じものです。
HTMLCollectionオブジェクトとNodeListオブジェクトはどちらも、オブジェクトの配列のようなリスト(コレクション)です。
どちらにも、リスト(コレクション)内のアイテムの数を定義するlengthプロパティがあります。
どちらも、配列のように各アイテムにアクセスするためのインデックス(0、1、2、3、4、...)を提供します。
HTMLCollectionアイテムには、名前、ID、またはインデックス番号でアクセスできます。
NodeListアイテムには、インデックス番号でのみアクセスできます。
NodeListオブジェクトのみが属性ノードとテキストノードを含むことができます。
ノードリストは配列ではありません!
ノードリストは配列のように見えるかもしれませんが、そうではありません。
ノードリストをループして、配列のようにそのノードを参照できます。
ただし、ノードリストでvalueOf()、push()、pop()、join()などの配列メソッドを使用することはできません。