HTML DOM Document getElementsByClassName() methode

Definitie en gebruik

getElementsByClassName() De methode retourneert een verzameling elementen met de opgegeven classnaam.

getElementsByClassName() De methode retourneert HTMLCollection.

getElementsByClassName() De eigenschappen zijn alleen lezen.

HTMLCollection

HTMLCollection Is een lijst van HTML-elementen die vergelijkbaar is met een array.

Elementen in de verzameling kunnen worden bereikt via index (beginnend bij 0).

length De eigenschap retourneert het aantal elementen in de verzameling.

Zie ook:

getElementById() methode

getElementsByTagName() methode

querySelector() methode

querySelectorAll() methode

HTMLCollection object

Voorbeeld

Voorbeeld 1

Verkrijg alle elementen met class="example":

const collection = document.getElementsByClassName("example");

Probeer het zelf

Voorbeeld 2

Verkrijg alle elementen die zowel de class "example" als "color" hebben:

const collection = document.getElementsByClassName("example color");

Probeer het zelf

Voorbeeld 3

Aantal elementen met class="example":

let numb = document.getElementsByClassName("example").length;

Probeer het zelf

Voorbeeld 4

Wijzig 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";
}

Probeer het zelf

Syntax

document.getElementsByClassName("classname)

Parameter

Parameter Beschrijving
classname

Verplicht. De classnaam van het element.

Retourneert meerdere door spaties gescheiden classnamen, bijvoorbeeld "test demo".

Retourneerwaarde

Type Beschrijving
Object

HTMLCollection object.

Verzameling van elementen met een specifieke classnaam.

Sorteert elementen op de volgorde waarin ze in het document verschijnen.

Browserondersteuning

document.getElementsByClassName() Is een DOM Level 1 (1998) kenmerk.

Ondersteund door alle browsers:

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

Gerelateerde pagina's

CSS Handleiding:CSS Syntax

CSS Referentiehandleiding:CSS .class Selector

HTML DOM Referentiehandleiding:element.getElementsByClassName()

HTML DOM Referentiehandleiding:className eigenschap

HTML DOM Referentiehandleiding:classList eigenschap

HTML DOM Referentiehandleiding:Style object