NodeList

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

メモ: NodeList は Array とは異なりますが、forEach() メソッドで処理を反復適用することは可能です。Array.from() を使うことで Array に変換することができます。

生きた NodeList と静的な NodeList

NodeList には 生きた ものと 静的な ものの 2 種類のものがありますが、どちらも NodeList と考えられています。

生きた NodeList

場合によっては NodeList は 生きた ものになります。DOM が変化すると、自動的に集合が更新されることを意味しています。

例えば、 Node.childNodes は生きています。

js
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 ループで走査することができます。

js
for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}

リストの要素について処理を回すために for...in を使用しないでください。NodeList のプロパティである要素に加えて、 length や item プロパティについても処理が適用されるため、 element オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for...in で取得されるプロパティの順番は保証されていません。

for...of ループであれば、NodeList オブジェクトを正しく扱うことができます。

js
const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
  checkbox.checked = true;
}

最近のブラウザーでは、イテレーターに基づくメソッドとして forEach(), entries(), values(), keys() に対応しています。

仕様書

DOM
# interface-nodelist

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

MDN の改良に協力

このページは役に立ちましたか？

はいいいえ

協力方法を知る

このページは MDN の貢献者によって 2025年7月22日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

ドキュメントオブジェクトモデル (DOM)
NodeList
インスタンスプロパティ
1. length
インスタンスメソッド
DOM に関連するページ
ガイド
1. DOM の構造
2. 属性の反映
3. DOM ツリー上の選択と走査
4. DOM ツリーの構築と更新
5. イベントの扱い

NodeList

目次

MDN の改良に協力