JavaScript HTML DOM Collecties

HTMLCollection object

getElementsByTagName() De methode retourneert HTMLCollection Object.

Een HTMLCollection object is een lijst van HTML elementen (een verzameling) die vergelijkbaar is met een array.

Het volgende codeblok selecteert alle <p> elementen in het document:

Voorbeeld

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

De elementen in de set kunnen worden bereikt via de indexnummer.

Om de tweede <p> element te bereiken, kun je zo schrijven:

y = x[1];

Probeer het zelf uit

Opmerking:De index begint bij 0.

HTML HTMLCollection lengte

length De eigenschap definieert het aantal elementen in de HTMLCollection:

Voorbeeld

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

Probeer het zelf uit

Voorbeeld uitleg:

  • Maakt een verzameling van alle <p> elementen
  • Toont de lengte van de verzameling

length Eigenschappen zijn nuttig wanneer u elementen in een verzameling moet doorlopen:

Voorbeeld

Verander de achtergrondkleur van alle <p> elementen:

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

Probeer het zelf uit

HTMLCollection is geen array!

HTMLCollection ziet eruit als een array, maar is geen array.

U kunt de lijst doorlopen en elementen via numerieke referenties ophalen (zoals een array).

Maar, u kunt geen arraymethoden gebruiken op HTMLCollection, zoals valueOf()enpop()enpush() of join().