JavaScript アドバンス

DOM Node Lists

1. HTML DOM NodeList オブジェクト

NodeList オブジェクトとは、ドキュメントから抽出されたノードのリスト（コレクション）です。

NodeList オブジェクトは、前述した HTMLCollection オブジェクトとほぼ同じ性質を持っています。

一部の（古い）ブラウザでは、getElementsByClassName() のようなメソッドに対して HTMLCollection ではなく NodeList を返すことがあります。
また、すべてのブラウザにおいて、childNodes プロパティは NodeList オブジェクトを返し、多くのブラウザで querySelectorAll() メソッドは NodeList オブジェクトを返します。

以下のコードは、ドキュメント内のすべての <p> ノードを選択する例です。

1.1 コード例

// querySelectorAll を使用して全ての <p> 要素を NodeList として取得
const myNodeList = document.querySelectorAll("p");

NodeList 内の要素には、インデックス番号を使用してアクセスできます。

2番目の <p> ノードにアクセスする場合は、以下のように記述します。

// 2番目のノード（インデックス 1）にアクセス
myNodeList[1]

注記: インデックスは 0 から始まります。

2. HTML DOM Node List の Length プロパティ

length プロパティは、ノードリストに含まれるノードの数を定義します。

2.1 コード例

// ノードリスト内のノード数を取得
myNodelist.length

length プロパティは、ノードリスト内のノードをループ処理で走査したい場合に非常に便利です。

2.2 ノードリスト内の全 <p> 要素の色を変更する例

const myNodelist = document.querySelectorAll("p");

for (let i = 0; i < myNodelist.length; i++) {
  // 各ノードのスタイル（色）を赤に変更します
  myNodelist[i].style.color = "red";
}

3. HTMLCollection と NodeList の違い

NodeList と HTMLCollection は非常によく似ています。

どちらもドキュメントから抽出されたノード（要素）の配列風コレクション（リスト）であり、どちらもインデックス番号（0から開始）でアクセス可能です。また、どちらもリスト内の要素数を返す length プロパティを持っています。

しかし、以下のような重要な違いがあります。

  • 構成要素の違い:
    • HTMLCollection は、ドキュメント要素（Element）のみのコレクションです。
    • NodeList は、ドキュメントノード（Node）のコレクションです（要素ノード、属性ノード、テキストノードを含みます）。
  • アクセス方法:
    • HTMLCollection のアイテムは、名前（name）、ID、またはインデックス番号でアクセスできます。
    • NodeList のアイテムは、インデックス番号でしかアクセスできません。
  • ライブ（動的）かスタティック（静的）か:
    • HTMLCollection は常にライブ（Live）なコレクションです。例えば、DOM内のリストに <li> 要素を追加すると、HTMLCollection 内のリストも即座に自動更新されます。
    • NodeList は多くの場合、スタティック（Static）なコレクションです。例えば、DOM内のリストに <li> 要素を追加しても、NodeList 内のリストは変化しません。

3.1 メソッドごとの戻り値

  • getElementsByClassName() や getElementsByTagName() メソッドは、ライブな HTMLCollection を返します。
  • querySelectorAll() メソッドは、スタティックな NodeList を返します。
  • childNodes プロパティは、ライブな NodeList を返します。

4. 配列ではありません！

NodeList は配列のように見えるかもしれませんが、配列ではありません。

NodeList をループ処理したり、インデックスでノードを参照したりすることはできます。

しかし、NodeList に対して push()、pop()、join() といった Array メソッドを使用することはできませんので注意してください。