NodeList オブジェクトはノードの集合であり、 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" が出力される

一方、 NodeList静的である場合、すなわち DOM 内の変更がコレクションの内容に影響を与えない場合もあります。 document.querySelectorAll() メソッドは、静的な NodeList を返します。

NodeList の各要素に反復処理を行う方法を選択したり、リストの長さをキャッシュしたりする場合は、この違いを考えておくといいでしょう。

プロパティ

NodeList.length
NodeList に含まれるノードの数です。

メソッド

NodeList.item()
指定されたインデックスに対応するリスト内の要素を返します。ただし、インデックスが範囲外の場合は null を返します。
nodeList[i] のアクセスの代替手段です (この場合、i が範囲外の時には undefined が返ります)。これは JavaScript 以外の言語による DOM の実装で便利です。
NodeList.entries()
iterator を返し、これによってコードがコレクションに含まれているキー・値の組を順次処理することができます。 (この場合、キーは 0 から始まる数値で値はノードです。)
NodeList.forEach()
指定された関数を NodeList の各要素に対して実行し、その要素を関数の引数として渡します。
NodeList.keys()
iterator を返し、これによってコードがコレクションに含まれているキー・値の組のキーを順次処理することができます。 (この場合、キーは 0 から始まる数値です。)
NodeList.values()
iterator を返し、これによってコードがコレクションに含まれているキー・値の組の値 (ノード) を順次処理することができます。

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

for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
}

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

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

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

最近のブラウザでは、イテレーターに基づくメソッドとして forEach(), entries(), values(), keys() に対応しています。

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

var list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
  checkbox.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 の定義
廃止された 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lengthChrome 完全対応 1Edge 完全対応 12Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
entriesChrome 完全対応 51Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 10WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile ? Firefox Android 完全対応 50Opera Android ? Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
forEachChrome 完全対応 51Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 10WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile ? Firefox Android 完全対応 50Opera Android ? Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
itemChrome 完全対応 1Edge 完全対応 12Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
keysChrome 完全対応 51Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 10WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile ? Firefox Android 完全対応 50Opera Android ? Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
valuesChrome 完全対応 51Edge 完全対応 16Firefox 完全対応 50IE 未対応 なしOpera 完全対応 38Safari 完全対応 10WebView Android 完全対応 51Chrome Android 完全対応 51Edge Mobile ? Firefox Android 完全対応 50Opera Android ? Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

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

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