JavaScriptのNodeListを理解する

定義と使用方

NodeListは、ウェブページ内で選択されたHTMLのノードを文書内の順序に従って集めたコレクション（集合）です。

このコレクションはDOMを操作する際によく使用され、要素を含むさまざまなノードを配列の要素のように扱うことができる反復可能な擬似配列オブジェクトです。

覚えておきましょう！
HTML DOMを操作する際に使用されるDOMコレクションには、HTMLCollectionとNodeListがあります。HTMLCollectionは要素のみを集めたコレクションですが、NodeListは生成方法によって要素だけでなくテキストやコメントなど、さまざまなノードを含むことがあります。
詳しい内容は、JavaScript HTMLCollectionとNodeListの比較を参照してください。

特徴

NodeListは、擬似配列オブジェクトであり、for...of文で反復処理が可能なイテラブルオブジェクトです。
lengthプロパティを使用すると、擬似配列オブジェクトであるNodeListの長さを取得できます。
擬似配列であるにもかかわらず、配列で使用されるforEach()関数を利用することができます。
NodeListは、その生成方法によってDOMの変更内容をリアルタイム（live）で反映する場合と、静的な状態のまま保持する場合があります。

`NodeList`オブジェクトを返すメソッドとプロパティ

`NodeList`オブジェクトを返すメソッドとプロパティの特徴
区分	返却オブジェクト	含まれる対象	リアルタイム反映の可否
`querySelectorAll()`	`NodeList`	要素ノードのみを含む	静的
`Node.childNodes`	`NodeList`	すべての子ノードを含む（テキスト、コメント、要素など）	リアルタイム（またはライブ）反映

基本の例

NodeListオブジェクトを返すquerySelectorAll()およびNode.childNodesを通じて、NodeListオブジェクトの使用方法と特徴について学びましょう。

`querySelectorAll()`

querySelectorAll()メソッドは、HTMLドキュメント全体または特定の要素内で、指定したCSSセレクターに一致するすべての要素をNodeListオブジェクトとして返します。

構文

使用方法

HTML

<!DOCTYPE html>
<html lang="ja"> 
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>
    </head>
    <body>
        <ul>
            <li>おにぎり</li> 
            <li>ラーメン</li> 
            <li>うどん</li> 
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>

queryselectorall.js

const liElements = document.querySelectorAll("li"); // liセレクターをすべて選択
console.log(liElements); // NodeList(3) [li, li, li]

/* 方法1 - for...of文を適用 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
// 出力: "おにぎり" "ラーメン" "うどん"

/* 方法2 - for文を適用 */
for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
// 出力: "おにぎり" "ラーメン" "うどん"

/* 方法3 - forEach()関数を適用 */
liElements.forEach(li => { // 擬似配列ですがforEach()関数を使用可能
    console.log(li.textContent);
});
// 出力: "おにぎり" "ラーメン" "うどん"

コード補足説明
for...of文は、値（value）で反復可能なオブジェクトのための繰り返し文です。
querySelectorAll()で返されたNodeListオブジェクトは、擬似配列オブジェクトであり、値（value）で反復可能なオブジェクトです。

コード補足説明
for文は、配列や擬似配列オブジェクトの数値インデックス（index）を基に要素にアクセスするため、インデックスとlengthプロパティがあれば反復可能です。
querySelectorAll()で返されたNodeListオブジェクトは、擬似配列オブジェクトであり、lengthプロパティを持っています。

`Node.childNodes`

Node.childNodesは、特定のノードの子ノードの一覧を返すプロパティです。この一覧はNodeListオブジェクトとして返されます。

使用方法

JavaScript

// HTML要素を選択します。
const myElement = document.getElementById("myElement");

// myElementの子ノード一覧を取得します。
const childNodes = myElement.childNodes;

// 子ノード一覧を反復処理して出力します。
for (var i = 0; i < childNodes.length; i++) {
    console.log(childNodes[i]);
}

コード補足説明
getElementById()関数は、HTMLドキュメント内で指定された文字列と一致するid属性を持つ要素オブジェクトを返します。

Node.childNodesプロパティの使用方法などは、本稿のテーマに対する関連性が低いため、ここでは取り扱いません。

場合によっては、DOMの変更がリアルタイム（またはライブ）で反映されない

querySelectorAll()メソッドで返されたNodeListオブジェクトは、DOMの変更をリアルタイム（またはライブ）で反映しないオブジェクトです。しかし、Node.childNodesプロパティで返されたNodeListオブジェクトは、DOMの変更をリアルタイム（またはライブ）で反映します。

次は「新しいメニュー追加」ボタンをクリックすると、<ul>要素に<li>要素が動的に追加される際、document.querySelectorAll("li")で取得された<li>要素の数、つまりNodeListオブジェクトの項目数がリアルタイム（またはライブ）で反映されない例です。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>     
    </head>
    <body>
        <ul id="list">
            <li>おにぎり</li> 
            <li>ラーメン</li> 
            <li>うどん</li> 
        </ul>
        <p><li> 要素の数: <strong id="li-length-val">3</strong></p>
        <button type="button" id="addButton">新しいメニュー追加</button>
        <script src="none-live.js"></script>
    </body>
</html>

JavaScript - none-live.js

// NodeListを取得
const liElements = document.querySelectorAll("li");

// ボタンクリック時に新しい<li>要素を追加
document.getElementById('addButton').addEventListener("click", () => {
    const newLi = document.createElement('li');
    newLi.textContent = "新しいメニュー";

    // 新しい<li>要素を<ul>に追加
    document.getElementById("list").appendChild(newLi);

    // <li>要素の数を確認（リアルタイムでは反映されない）
    const liElementsLength = liElements.length; // 既に取得していたliElementsのlengthは更新されない
    document.getElementById("li-length-val").textContent = liElementsLength;
});

コード補足説明
createElement()関数は、新しいHTML要素を生成して返します。

コード補足説明
appendChild()関数は、ノードを特定のノードの最後の子として追加します。

新しい要素を追加しても、NodeListオブジェクトはリアルタイム（またはライブ）で反映されないため、<li>要素の数が変わらないことを確認できます。これは、DOMの変更をリアルタイム（またはライブ）で反映するHTMLCollectionオブジェクトとは異なる点です。

仕様書

NodeListの仕様書
仕様書
`NodeList`	DOM Standard #interface-nodelist

ブラウザ互換性

NodeListのブラウザー互換性
オブジェクトとプロパティ	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`NodeList`	1	12	1	1
`length`	1	12	1	1

参考資料

codingCourses：JavaScript NodeList Tutorial

定義と使用方

特徴

NodeListオブジェクトを返すメソッドとプロパティ

基本の例

querySelectorAll()

構文

使用方法

Node.childNodes

使用方法

場合によっては、DOMの変更がリアルタイム（またはライブ）で反映されない

仕様書

ブラウザ互換性

参考資料

関連項目

`NodeList`オブジェクトを返すメソッドとプロパティ

`querySelectorAll()`

`Node.childNodes`