JavaScript HTML DOMコレクション
HTMLCollectionオブジェクト
getElementsByTagName()メソッドは、HTMLCollectionオブジェクトを返します。
HTMLCollectionオブジェクトは、HTML要素の配列のようなリスト(コレクション)です。
次のコードは、ドキュメント内のすべての<p>要素を選択します。
例
const myCollection = document.getElementsByTagName("p");
コレクション内の要素には、インデックス番号でアクセスできます。
2番目の<p>要素にアクセスするには、次のように記述できます。
myCollection[1]
注：インデックスは0から始まります。
HTML HTMLコレクションの長さ
lengthプロパティは、HTMLCollection内の要素の数を定義します。
この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()などの配列メソッドを使用することはできません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。