NodeList
NodeList
オブジェクトはノードの集合であり、 Node.childNodes
などのプロパティや document.querySelectorAll()
などのメソッドの返値として用いられます。
メモ: NodeList
は Array
とは異なりますが、forEach()
メソッドで処理を反復適用することは可能です。Array.from()
を使うことで Array
に変換することができます。
生きた NodeList と静的な NodeList
NodeList には 生きた ものと 静的な ものの 2 種類のものがありますが、どちらも NodeList
と考えられています。
生きた NodeList
場合によっては NodeList
は 生きた ものになります。DOM が変化すると、自動的に集合が更新されることを意味しています。
例えば、 Node.childNodes
は生きています。
const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // "2" と仮定すると
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // "3" が出力される
静的な NodeList
一方、 NodeList
が 静的 である場合があります。この場合は、DOM 内を変更しても集合の内容に影響を与えません。document.querySelectorAll()
メソッドは、静的な NodeList
を返します。
NodeList
の各要素に反復処理を行う方法を選択したり、リストの長さをキャッシュしたりする場合は、この違いを考えておくといいでしょう。
インスタンスプロパティ
NodeList.length
読取専用-
NodeList
に含まれるノードの数です。
インスタンスメソッド
NodeList.item()
-
指定されたインデックスに対応するリスト内の要素を返します。インデックスが範囲外の場合は
null
を返します。nodeList[i]
のアクセスの代替手段です(この場合、i
が範囲外の時にはundefined
が返ります)。これは JavaScript 以外の言語による DOM の実装で便利です。 NodeList.entries()
-
イテレーター
を返し、これによってコードが集合に含まれているキーと値のペアを走査することができます。 (この場合、キーは 0 から始まる数値で値はノードです。) NodeList.forEach()
-
指定された関数を
NodeList
の各要素に対して実行し、その要素を関数の引数として渡します。 NodeList.keys()
-
イテレーター
を返し、これによってコードが集合に含まれているキーと値のペアのキーを走査することができます。(この場合、キーは 0 から始まる数値です。) NodeList.values()
-
イテレーター
を返し、これによってコードが集合に含まれているキーと値のペアの値(ノード)を走査することができます。
例
NodeList
の中のアイテムは、for ループで走査することができます。
for (let i = 0; i < myNodeList.length; i++) {
let item = myNodeList[i];
}
リストの要素について処理を回すために for...in
を使用しないでください。NodeList
のプロパティである要素に加えて、 length
や item
プロパティについても処理が適用されるため、 element
オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for...in
で取得されるプロパティの順番は保証されていません。
for...of
ループであれば、NodeList
オブジェクトを正しく扱うことができます。
const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
checkbox.checked = true;
}
最近のブラウザーでは、イテレーターに基づくメソッドとして forEach()
, entries()
, values()
, keys()
に対応しています。
仕様書
Specification |
---|
DOM Standard # interface-nodelist |
ブラウザーの互換性
BCD tables only load in the browser