HTML DOM-document getElementsByClassName()
Voorbeeld
Haal alle elementen op met class="example":
const collection = document.getElementsByClassName("example");
Verkrijg alle elementen met zowel de klassen "voorbeeld" als "kleur":
const collection = document.getElementsByClassName("example color");
Hieronder meer voorbeelden.
Definitie en gebruik
De getElementsByClassName()methode retourneert een verzameling elementen met een opgegeven klassenaam(en).
De getElementsByClassName()methode retourneert een HTMLCollection .
De getElementsByClassName()eigenschap is alleen-lezen.
HTMLCollection
Een HTMLCollection is een verzameling HTML-knooppunten.
Knooppunten in een verzameling zijn toegankelijk via indexnummers. De index begint bij 0.
De eigenschap length retourneert het aantal elementen in de verzameling.
Zie ook:
De Document getElementById() methode
De methode getElementsByTagName() document
De Document querySelector() Methode
Syntaxis
document.getElementsByClassName(classname)
Parameters:
| Parameter | Description |
| classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Winstwaarde
| Type | Beschrijving |
| Object. | Een HTMLCollection- object. Een verzameling elementen met de opgegeven klassenaam. De elementen worden gesorteerd zoals ze in het document worden weergegeven. |
Meer voorbeelden
Aantal elementen met class="example":
let numb = document.getElementsByClassName("example").length;
Verander de achtergrondkleur van alle elementen met class="example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-syntaxis
CSS-referentie: CSS .class- kiezer
HTML DOM-referentie: element .getElementsByClassName()
HTML DOM-referentie: className Property
HTML DOM-referentie: classList-eigenschap
HTML DOM-referentie: stijlobject
Browserondersteuning
document.getElementsByClassName() is een DOM Level 1 (1998)-functie.
Het wordt volledig ondersteund in alle browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |