JavaScript HTML DOM samling

HTMLCollection-objekt

getElementsByTagName() Metoden returnerar HTMLCollection Objekt.

HTMLCollection-objekt är en arrayliknande lista av HTML-element (samling).

Följande kod väljer alla <p>-element i dokumentet:

Exempel

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

Element i denna samling kan nås via indexnummer.

För att komma åt den andra <p>-elementet kan du skriva så här:

y = x[1];

Prova det själv

Kommentar:Index börjar från 0.

HTML HTMLCollection längd

length Egenskap definierar antalet element i HTMLCollection:

Exempel

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

Prova det själv

Exempel förklaring:

  • Skapa en sammansättning av alla <p>-element
  • Visar sammansättningens längd

length Egenskaper är användbara när du behöver navigera i sammansättningen av element:

Exempel

Ändra bakgrundsfärgen för alla <p>-element:

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

Prova det själv

HTMLCollection är inte en array!

HTMLCollection ser ut som en array, men är inte en array.

Du kan navigera listan och hänvisa till element via numeriska referenser (liksom med en array).

Men du kan inte använda arraymetoder för HTMLCollection, som valueOf()、pop()、push() eller join().