NodeList

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

NodeListArray と異なりますが、forEach() メソッドで処理を順次適用することは可能です。ただし、このメソッドは古いブラウザで実装されていない場合があります。

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...infor 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() がサポートされています。

仕様

仕様書 策定状況 備考
DOM
NodeList の定義
現行の標準  
DOM4
NodeList の定義
勧告  
Document Object Model (DOM) Level 3 Core Specification
NodeList の定義
勧告  
Document Object Model (DOM) Level 2 Core Specification
NodeList の定義
勧告  
Document Object Model (DOM) Level 1 Specification
NodeList の定義
勧告 初期定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) (有) (有) (有)
entries(), keys(), values(), forEach() ? 50.0 (50.0) ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート (有) (有) (有) (有) (有) (有) (有) (有)
entries(), keys(), values(), forEach() ? ? 50.0 (50.0) ? ? ? ? ?

ドキュメントのタグと貢献者

 このページの貢献者: hashedhyphen, unarist, fscholz
 最終更新者: hashedhyphen,