JavaScript HTML DOM Sammlungen

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

下面的代码选取文档中的所有 <p> 元素：

Beispiel

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

该集合中的元素可通过索引号进行访问。

如需访问第二个 <p> 元素，您可以这样写：

y = x[1];

Probieren Sie es selbst aus

注释：索引从 0 开始。

HTML HTMLCollection 长度

length 属性定义了 HTMLCollection 中元素的数量：

Beispiel

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

Probieren Sie es selbst aus

Beispiel-Erklärung:

  • Erstellen Sie die Sammlung aller <p>-Elemente
  • Zeigt die Länge der Sammlung an

length Die Eigenschaft ist nützlich, wenn Sie die Elemente der Sammlung durchlaufen müssen:

Beispiel

Ändern Sie die Hintergrundfarbe aller <p>-Elemente:

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

Probieren Sie es selbst aus

HTMLCollection ist kein Array!

HTMLCollection sieht vielleicht wie ein Array aus, aber es ist keines.

Sie können die Liste durchlaufen und Elemente durch numerische Referenz wie ein Array abrufen.

Allerdings können Sie keine Array-Methode wie valueOf()、pop()、push() oder join().