JavaScript HTML DOM samlinger

HTMLCollection-objekt

getElementsByTagName() Metoden returnerer HTMLCollection Objekt.

HTMLCollection-objektet er en array-lignende liste af HTML-elementer (samling).

Følgende kode vælger alle <p>-elementer i dokumentet:

Eksempel

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

Elementerne i denne samling kan tilgås via indeksnummer.

Hvis du vil tilgå den anden <p>-element, kan du skrive det sådan:

y = x[1];

Prøv det selv

Kommentar:Indekset starter fra 0.

HTML HTMLCollection længde

length Egenskab definerer antallet af elementer i HTMLCollection:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  • Opret en samling af alle <p> elementer
  • Viser længden af samlingen

length Egenskaber er nyttige, når du skal gennemgå elementer i en samling:

Eksempel

Ændr baggrundsfarven på alle <p> elementer:

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

Prøv det selv

HTMLCollection er ikke et array!

HTMLCollection ser måske ud som et array, men er ikke et array.

Du kan gennemgå listen og referere til elementer ved hjælp af numeriske referencer (som et array).

Men du kan ikke bruge arraymetoder på HTMLCollection, såsom valueOf()、pop()、push() eller join().