DOM Collections

1. HTMLCollection オブジェクト

getElementsByTagName() メソッドは、HTMLCollection オブジェクトを返します。

HTMLCollection オブジェクトは、HTML 要素の配列のようなリスト（コレクション）です。

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

1.1 コード例

// 全ての <p> 要素を取得し、コレクションに格納します
const myCollection = document.getElementsByTagName("p");

コレクション内の要素には、インデックス番号でアクセスできます。

2番目の <p> 要素にアクセスするには、以下のように記述します。

// 2番目の要素（インデックス 1）にアクセス
myCollection[1]

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

2. HTML HTMLCollection の Length プロパティ

length プロパティは、HTMLCollection に含まれる要素の数を定義します。

2.1 コード例

// コレクション内の要素数を取得
myCollection.length

length プロパティは、コレクション内の要素をループ処理で走査したい場合に非常に便利です。

2.2 全ての <p> 要素のテキスト色を変更する例

const myCollection = document.getElementsByTagName("p");

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

3. HTMLCollection は配列ではありません！

HTMLCollection は一見すると配列のように見えますが、配列（Array）ではありません。

リストをループ処理したり、配列と同じようにインデックス（数字）を使って各要素を参照したりすることは可能です。

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