JavaScript HTML DOM コレクション(Collection)
この章ではDOMコレクションの使用方法を紹介します。
HTMLCollection オブジェクト
getElementsByTagName() メソッドはHTMLCollectionオブジェクトを返します。
HTMLCollection オブジェクトは HTML 要素を含む配列に似ています。
以下のコードはドキュメント内のすべての <p> 要素を取得します：
例
var x = document.getElementsByTagName("p");
コレクション内の要素はインデックス（0から始まる）でアクセスできます。
2番目の <p> 要素にアクセスするには、次のコードを使用します：
y = x[1];
試してみる »
HTMLCollection オブジェクトの length プロパティ
HTMLCollection オブジェクトの length プロパティは、コレクション内の要素の数を定義します。
例
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
試してみる »
例の解説
<p> 要素のコレクションを取得：
var myCollection = document.getElementsByTagName("p");
コレクションの要素数を表示：
document.getElementById("demo").innerHTML = myCollection.length;
コレクションの 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() を使用できません。
その他の拡張