NodeList
NodeList
オブジェクトはノードの集合であり、 Node.childNodes
などのプロパティや document.querySelectorAll()
などのメソッドの返値として用いられます。
メモ: NodeList
は Array
とは異なりますが、 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()
(en-US)-
iterator
を返し、これによってコードがコレクションに含まれているキー・値の組を順次処理することができます。 (この場合、キーは 0 から始まる数値で値はノードです。) NodeList.forEach()
-
指定された関数を
NodeList
の各要素に対して実行し、その要素を関数の引数として渡します。 NodeList.keys()
(en-US)-
iterator
を返し、これによってコードがコレクションに含まれているキー・値の組のキーを順次処理することができます。 (この場合、キーは 0 から始まる数値です。) NodeList.values()
(en-US)-
iterator
を返し、これによってコードがコレクションに含まれているキー・値の組の値 (ノード) を順次処理することができます。
例
NodeList
の各要素について処理を順次適用するには、以下のような方法があります。
for (var i = 0; i < myNodeList.length; i++) {
var item = myNodeList[i];
}
リストの要素について処理を回すために for...in
や for 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()
(en-US), values()
(en-US), keys()
(en-US) に対応しています。
また、 Internet Explorer と互換性がある手法として、反復に Array.prototype.forEach
を使用することができます。
var list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
checkbox.checked = true;
});
仕様書
Specification |
---|
DOM Standard # interface-nodelist |
ブラウザーの対応
BCD tables only load in the browser