NodeList オブジェクトは DOM ノードの集合を表すオブジェクトであり、 {{domxref("Node.childNodes")}} や {{domxref("document.querySelectorAll")}} メソッドの戻り値として用いられます。
NodeList は Array と異なりますが、forEach() メソッドで処理を順次適用することは可能です。ただし、このメソッドは古いブラウザで実装されていない場合があります。
NodeList オブジェクトの中には、DOM に対する変更がリアルタイムで反映されるものもあります。例えば、{{domxref("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 オブジェクトの内容に影響を与えないものもあります。{{domxref("document.querySelectorAll")}} メソッドは、そのような静的な NodeList を返します。
NodeList の各要素に処理を順次適用させたい際、またリストの長さを保存しておきたい際には、上で述べた違いがあることを念頭に置くようにしてください。
プロパティ
- {{domxref("NodeList.length")}}
NodeListに含まれるノードの数
メソッド
- {{domxref("NodeList.item()")}}
- 指定されたインデックスに対応するリスト内の要素を返します。ただし、インデックスが範囲外の場合は
nullを返します。このメソッドは、シンプルなアクセス方法のnodeList[idx]（この場合、idxが範囲外の時にはundefinedが返ります）の代替として利用できます。 - {{domxref("NodeList.entries()")}}
- {{jsxref("Iteration_protocols","iterator")}} を返します。このオブジェクトにより、すべてのキー・値の組について処理を回すことができます。
- {{domxref("NodeList.forEach()")}}
- 与えられた関数を
NodeListの各要素に対して実行します。 - {{domxref("NodeList.keys()")}}
- {{jsxref("Iteration_protocols", "iterator")}} を返します。このオブジェクトにより、すべてのキーについて処理を回すことができます。
- {{domxref("NodeList.values()")}}
- {{jsxref("Iteration_protocols", "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 プロパティについても処理が適用されるため、{{domxref("element")}} オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for..in で取得されるプロパティの順番は保証されていません。
for...of ループであれば、NodeList オブジェクトを正しく扱うことができます。
var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
item.checked = true;
}最近のブラウザでは、イテレータに基づくメソッドとして {{domxref("NodeList.forEach()", "forEach()")}} や {{domxref("NodeList.entries()", "entries()")}}、{{domxref("NodeList.values()", "values()")}}、{{domxref("NodeList.keys()", "keys()")}} がサポートされています。
仕様
| 仕様書 | 策定状況 | 備考 |
|---|---|---|
| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | |
| {{SpecName('DOM4', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM4') }} | |
| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | |
| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | |
| {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | 初期定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
entries(), keys(), values(), forEach() |
{{CompatUnknown}} | {{CompatGeckoDesktop("50.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| 機能 | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| 基本サポート | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
entries(), keys(), values(), forEach() |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("50.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |