JavaScript H TMLDOMコレクション
HTMLCollectionオブジェクト
このgetElementsByTagName()
メソッドはHTMLCollection
オブジェクトを返します。
HTMLCollection
オブジェクトは、HTML要素の配列のようなリスト(コレクション)です。
次のコード<p>
は、ドキュメント内のすべての要素を選択します。
例
const myCollection = document.getElementsByTagName("p");
コレクション内の要素には、インデックス番号でアクセスできます。
2番目の<p>要素にアクセスするには、次のように記述できます。
myCollection[1]
注:インデックスは0から始まります。
HTMLHTMLCollectionの長さ
プロパティは、 :length
内の要素の数を定義します。HTMLCollection
例
myCollection.length
このlength
プロパティは、コレクション内の要素をループする場合に役立ちます。
例
すべての<p>要素のテキストの色を変更します。
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
HTMLCollectionは配列ではありません!
HTMLCollectionは配列のように見えるかもしれませんが、そうではありません。
リストをループして、要素を番号で参照できます(配列のように)。
ただし、HTMLCollectionでvalueOf()、pop()、push()、join()などの配列メソッドを使用することはできません。