NodeList

生きた 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() に対応しています。

仕様書

ブラウザーの互換性