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