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

NodeListArray と異なりますが、forEach() メソッドで処理を順次適用することは可能です。Array.from()を使うことでArrayに変換することができます。

ただし、NodeList.forEach()Array.from()も古いブラウザで実装されていない場合があります。これらの制限はArray.prototype.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() がサポートされています。

また、Internet Explorer と互換性がある手法として、反復にArray.prototype.forEachを使用することができます。

var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
  item.checked = true;
});

仕様

仕様書 策定状況 備考
DOM
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 の定義
廃止された 初期定義

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
length112 ? ? ? ?
entries511650 なし3810
forEach511650 なし3810
item112 ? ? ? ?
keys511650 なし3810
values511650 なし3810
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
length あり あり ? ? ? ? あり
entries5151 ?50 ?105.0
forEach5151 ?50 ?105.0
item あり あり ? ? ? ? あり
keys5151 ?50 ?105.0
values5151 ?50 ?105.0

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

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