NodeList

NodeList オブジェクトは DOM ノードの集合を表すオブジェクトであり、 Node.childNodes や document.querySelectorAll メソッドの戻り値として用いられます。

NodeList オブジェクトの中には、DOM に対する変更がリアルタイムで反映されるものもあります。例えば、Node.childNodes はこの性質を有しています。

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // ここでの値が "2" だった場合、
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // この出力は "3" となるはずです。

対して、DOM への変更が NodeList オブジェクトの内容に影響を与えないものもあります。document.querySelectorAll メソッドは、そのような静的な NodeList を返します。

NodeList の各要素に処理を順次適用させたい際、またリストの長さを保存しておきたい際には、上で述べた違いがあることを念頭に置くようにしてください。

プロパティ

NodeList.length

NodeList に含まれるノードの数

メソッド

 

NodeList.item()

指定されたインデックスに対応するリスト内の要素を返します。ただし、インデックスが範囲外の場合は null を返します。このメソッドは、シンプルなアクセス方法の nodeList[idx] （この場合、idx が範囲外の時には undefined が返ります）の代替として利用できます。

NodeList.entries()

iterator を返します。このオブジェクトにより、すべてのキー・値の組について処理を回すことができます。

NodeList.forEach()

与えられた関数を NodeList の各要素に対して実行します。

NodeList.keys()

iterator を返します。このオブジェクトにより、すべてのキーについて処理を回すことができます。

NodeList.values()

iterator を返します。このオブジェクトにより、すべての値について処理を回すことができます。

例

NodeList の各要素について処理を順次適用するには、以下のような方法があります。

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  // JavaScript では myNodeList.item(i) を呼び出す必要はありません
}

リストの要素について処理を回すために for...in や for each...in を用いてはいけません。なぜなら、NodeList のプロパティである要素に加えて、length プロパティについても処理が適用されるため、element オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for..in で取得されるプロパティの順番は保証されていません。

for...of ループであれば、NodeList オブジェクトを正しく扱うことができます。

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

最近のブラウザでは、イテレータに基づくメソッドとして forEach() や entries()、values()、keys() がサポートされています。