HTML DOM Element getElementsByClassName() methode

Definitie en gebruik

getElementsByClassName() De methode retourneert een verzameling van subelementen met de gegeven classnaam, als NodeList-object.

Zie ook:

classList-eigenschap

className-eigenschap

querySelector() methode

querySelectorAll() methode

getElementsByTagName() methode

HTML DOM Style Object

Handleiding:

CSS syntax

CSS selector

CSS selector reference manual

NodeList

NodeList Is een vergelijkbare array van knopen (lijst).

Je kunt de knopen in de lijst bereiken via index (index). De index begint bij 0.

length-eigenschapGeef het aantal knopen in de lijst terug.

Voorbeeld

Voorbeeld 1

Wijzig de tekst van het eerste lijstitem met class="child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Probeer het zelf

Voorbeeld 2

Aantal elementen met class="child" in "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Probeer het zelf

Voorbeeld 3

Wijzig de grootte van het tweede element van class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Probeer het zelf

Voorbeeld 4

Gebruik "child" en "color" klassen om de grootte van het eerste element te wijzigen in de tweede element met class="example":

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Probeer het zelf

Voorbeeld 5

Verander de kleur van alle elementen met class="child" in "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Probeer het zelf

Syntaxis

element.getElementsByClassName(classname)

Parameter

Parameter Beschrijving
classname

Verplicht. Classnaam van de subelementen.

Scheid meerdere namen met een spatie (bijvoorbeeld "child color").

Retourwaarde

Type Beschrijving
NodeList

Onderliggende elementen van elementen die de opgegeven classnaam bevatten.

Elementen worden gesorteerd op de volgorde waarin ze in de broncode verschijnen.

Browserondersteuning

element.getElementsByClassName() is een DOM Level 1 (1998) kenmerk.

Het wordt volledig ondersteund door alle browsers:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning 9-11 Ondersteuning Ondersteuning Ondersteuning Ondersteuning