NodeList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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() に対応しています。

仕様書

Specification

DOM
# interface-nodelist

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年7月22日 by MDN contributors.

View this page on GitHub • Report a problem with this content

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

NodeList

In this article

Help improve MDN