JavaScriptのHTMLCollectionを理解する

定義と使用方

HTMLCollectionは、ウェブページ内で選択されたHTML要素のみを、ドキュメント内の順序に従ってまとめたコレクション（集合）です。

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

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

ノード（Node）: HTML DOMは、さまざまなノード（Node）で構成された構造です。
HTMLでいう「要素」とは「要素ノード」を指し、テキストは「テキストノード」、コメントは「コメントノード」と呼ばれます。

特徴

HTMLCollectionは擬似配列オブジェクトであり、for...of文で反復可能です。ただし、Iteration Protocolsが適用されるオブジェクトではありません。
lengthプロパティを使用して、擬似配列オブジェクトであるHTMLCollectionの長さを取得できます。
HTMLCollectionは、DOMの変更をリアルタイム（またはライブ）で反映するオブジェクトです。

`HTMLCollection`オブジェクトを返すメソッド

getElementsByTagName()
getElementsByClassName()

覚えておきましょう！
これら2つのメソッド以外にも、HTMLCollectionオブジェクトを返すメソッドは存在します。しかし、これら2つのメソッドが最も代表的でよく使用されるメソッドです。

基本の例

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

`getElementsByTagName()`

getElementsByTagName()は、文字列で指定されたHTMLタグ名と一致するすべての要素をHTMLCollectionオブジェクトとして返します。

構文

使用方法

HTML

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

tag-name.js

const liElements = document.getElementsByTagName("li"); // liタグをすべて選択
console.log(liElements); // HTMLCollection(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++) { // lengthプロパティを使用可能
    console.log(liElements[i].textContent);
}
// 出力: "おにぎり" "ラーメン" "うどん"

/* 方法3 - 配列オブジェクトに変換して配列のforEach()メソッドを適用 */

// スプレッド構文を使用して配列オブジェクトに変換
const arr = [...liElements];

arr.forEach(li => {
    console.log(li.textContent);
});
// 出力: "おにぎり" "ラーメン" "うどん"

// Array.from()メソッドを使用して配列オブジェクトに変換
const liElementsArray = Array.from(liElements);

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
// 出力: "おにぎり" "ラーメン" "うどん"

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

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

コード補足説明
forEach()関数は、配列を反復して各要素をコールバック関数で処理するための配列のメソッドです。コード例では、この関数を使ってHTMLCollectionを配列オブジェクトに変換してアクセスする方法を示しています。

コード補足説明
スプレッド構文は、...（ドット3つ）の後に対象となるイテラブルオブジェクト（配列、文字列、DOMコレクションなど）を置く形式の構文で、イテラブルオブジェクトの要素を簡単に個別に展開して列挙できます。この構文を使用すると、擬似配列を配列に簡単に変換できます。

コード補足説明
Array.from()関数は、指定した擬似配列オブジェクトやイテラブルオブジェクトを新しい配列に変換して返す関数です。

`getElementsByClassName()`

getElementsByClassName()は、指定されたHTMLクラス属性名と一致するすべての要素を選択し、HTMLCollectionオブジェクトを返します。

構文

使用方法

HTML

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

コード補足説明
HTMLのclass属性は、要素に1つ以上のクラス名を指定する属性です。

class-name.js

const liElements = document.getElementsByClassName("a");
console.log(liElements); // HTMLCollection(3) [li.a, li.a, li.a]

/* 方法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()メソッドを適用 */

// スプレッド構文を使用して配列オブジェクトに変換
const arr = [...liElements];

arr.forEach(li => {
    console.log(li.textContent);
});
// 出力: "おにぎり" "ラーメン" "うどん"

// Array.from()メソッドを使用して配列オブジェクトに変換
const liElementsArray = Array.from(liElements);

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
// 出力: "おにぎり" "ラーメン" "うどん"

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

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

コード補足説明
Array.from()関数は、指定した擬似配列オブジェクトやイテラブルオブジェクトを新しい配列に変換して返す関数です。

リアルタイム（またはライブ）DOMオブジェクト

HTMLCollectionオブジェクトは、DOMの変更をリアルタイム（またはライブ）で反映するオブジェクトです。これは、HTMLCollectionオブジェクトが生成された後にDOMが変更されると、HTMLCollectionオブジェクトも変更されることを意味します。つまり、HTMLCollectionオブジェクトはウェブページの要素を現在の状態でリアルタイムに反映するオブジェクトです。

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

HTML

<!DOCTYPE html>
<html lang="ja"> 
    <head>
        <meta charset="UTF-8">
        <title>HTMLCollection</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="live.js"></script>
    </body>
</html>

JavaScript - live.js

// HTMLCollectionを取得
const liElements = document.getElementsByTagName("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要素を生成して返す関数です。

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

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

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

仕様書

HTMLCollectionの仕様書
仕様書
`HTMLCollection`	DOM Standard #interface-htmlcollection

ブラウザ互換性

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

参考資料

codingCourses：JavaScript HTMLCollection Tutorial

定義と使用方

特徴

HTMLCollectionオブジェクトを返すメソッド

基本の例

getElementsByTagName()

構文

使用方法

getElementsByClassName()

構文

使用方法

リアルタイム（またはライブ）DOMオブジェクト

仕様書

ブラウザ互換性

参考資料

関連項目

`HTMLCollection`オブジェクトを返すメソッド

`getElementsByTagName()`

`getElementsByClassName()`