JavaScript HTML DOM コレクション

HTMLCollection オブジェクト

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

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

以下のコードはドキュメント内のすべての <p> 要素を選択します：

インスタンス

var x = document.getElementsByTagName("p");

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

2番目の <p> 要素にアクセスするには、以下のように書けます：

y = x[1];

自分で試してみる

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

HTML HTMLCollection 長さ

length HTMLCollection オブジェクト内の要素の数を定義しています：

インスタンス

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

自分で試してみる

インスタンス説明：

  • すべての <p> 要素の集合を作成する
  • 集合の長さを表示する

length 属性は、集合内の要素を巡る必要がある場合に役立ちます：

インスタンス

すべての <p> 要素の背景色を変更する：

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

自分で試してみる

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

HTMLCollection は配列のように見えるが、配列ではありません。

リストを巡って要素をデジタルリファレンスで参照することができます（配列のように）。

ただし、HTMLCollection には配列メソッド（例えば）を使用することができません。 valueOf()、pop()、push() または join()。