HTML DOM getElementsByClassName() Methode
❮Het Element-ObjectVoorbeeld
Wijzig de tekst van het eerste lijstitem met class="child" (index 0) in een lijst met class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De methode getElementsByClassName() retourneert een verzameling onderliggende elementen van een element met de opgegeven klassenaam, als een NodeList-object.
Het NodeList-object vertegenwoordigt een verzameling knooppunten. De knooppunten zijn toegankelijk via indexnummers. De index begint bij 0.
Tip: U kunt de eigenschap length van het NodeList-object gebruiken om het aantal onderliggende knooppunten met de opgegeven klassenaam te bepalen, waarna u door alle knooppunten kunt lopen en de gewenste informatie kunt extraheren.
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Syntaxis
element.getElementsByClassName(classname)
Parameterwaarden
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Technische details
| DOM-versie: | Kernniveau 1 Element Object |
|---|---|
| Winstwaarde: | Een NodeList-object, dat een verzameling van de onderliggende elementen van de elementen vertegenwoordigt met de opgegeven klassenaam. De elementen in de geretourneerde collectie worden gesorteerd zoals ze in de broncode voorkomen. |
Meer voorbeelden
Voorbeeld
Verander de achtergrondkleur van het tweede element met class="child" in een <div> element:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Voorbeeld
Ontdek hoeveel elementen met class="child" er in een <div>-element zitten (met behulp van de eigenschap length van het NodeList-object):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Voorbeeld
Wijzig de achtergrondkleur van het eerste element met zowel de "child"- als de "color"-klasse in een element met class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Voorbeeld
Verander de achtergrondkleur van alle elementen met class="child" in een <div> element:
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-syntaxis
CSS-referentie: CSS .class- kiezer
HTML DOM-referentie: document.getElementsByClassName()
HTML DOM-referentie: className Property
HTML DOM-referentie: classList-eigenschap
HTML DOM-referentie: HTML DOM-stijlobject
❮Het Element-Object