NodeList オブジェクトはノードの集合であり、Node.childNodes などのプロパティやdocument.querySelectorAll() などのメソッドの返値として用いられます。

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

仕様書

ブラウザーの互換性