HTML DOM Document getElementsByClassName() metoden

Definition och användning

getElementsByClassName() Metoden returnerar en samling av element med den specificerade klassnamnet.

getElementsByClassName() Metoden returnerar HTMLCollection.

getElementsByClassName() Egenskapen är skrivskyddad.

HTMLCollection

HTMLCollection Är en samling av HTML-element som liknar en array (lista).

Element i sammansättningen kan nås via index (börjar vid 0).

length Egenskapen returnerar antalet element i sammansättningen.

Se också:

getElementById() metoden

getElementsByTagName() metoden

querySelector() metoden

querySelectorAll() metoden

HTMLCollection-objekt

Exempel

Exempel 1

Få tag på alla element med klass="example":

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

Prova själv

Exempel 2

Få tag på alla element som har både klassen "example" och "color":

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

Prova själv

Exempel 3

Antal element med class="example":

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

Prova själv

Exempel 4

Ändra bakgrundsfärgen för alla element med class="example":

const collection = document.getElementsByClassName("example");
för (låt i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Prova själv

Syntax

document.getElementsByClassName("example")classname)

Parameter

Parameter Beskrivning
classname

Obligatoriskt. Elementets klassnamn.

Försök att hitta flera klassnamn separerade av mellanslag, t.ex. "test demo".

Återvärd

Typ Beskrivning
Objekt

HTMLCollection-objekt.

En samling av element med den specificerade klassnamnet.

Sorterar element enligt deras ordning i dokumentet.

Webbläsarstöd

document.getElementsByClassName() Det är en DOM Level 1 (1998) egenskap.

Alla webbläsare stöder det:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd

Relaterade sidor

CSS-tutorials:CSS-syntax

CSS Referenshandbok:CSS .class-väljare

HTML DOM Referenshandbok:element.getElementsByClassName()

HTML DOM Referenshandbok:className egenskap

HTML DOM Referenshandbok:classList egenskap

HTML DOM Referenshandbok:Style-objekt