HTML DOM Document getElementsByClassName() metoden

Definering og brug

getElementsByClassName() Metoden returnerer en samling af elementer med den specificerede klassenavn.

getElementsByClassName() Metoden returnerer HTMLCollection.

getElementsByClassName() Egenskaberne er skrivebeskyttede.

HTMLCollection

HTMLCollection Er en samling af HTML-elementer, der ligner en array ( liste ).

Elementer i samlingen kan nås via indeks ( starter fra 0 ).

length Egenskaben returnerer antallet af elementer i samlingen.

Se også:

getElementById() metoden

getElementsByTagName() metoden

querySelector() metoden

querySelectorAll() metoden

HTMLCollection objekt

Eksempel

Eksempel 1

Få alle elementer med class="example":

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

Prøv det selv

Eksempel 2

Få alle elementer, der har både "example" og "color" klasser:

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

Prøv det selv

Eksempel 3

Antal elementer med class="example":

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

Prøv det selv

Eksempel 4

Ændr baggrundsfarven for alle elementer med class="example":

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Prøv det selv

Syntax

document.getElementsByClassName("classname)

Parameter

Parameter Beskrivelse
classname

Obligatorisk. Elementets klasse navn.

Søgbar flere klasser adskilt af mellemrum, f.eks. "test demo".

Returværdi

Type Beskrivelse
Objekt

HTMLCollection objekt.

Samling af elementer med den angivne klasse navn.

Sorterer elementer efter deres optræden i dokumentet.

Browser support

document.getElementsByClassName() er DOM Level 1 (1998) funktion.

Alle browsere understøtter det:

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

Relaterede sider

CSS tutorial:CSS syntaks

CSS reference manual:CSS .class vælger

HTML DOM reference manual:element.getElementsByClassName()

HTML DOM reference manual:className egenskab

HTML DOM reference manual:classList egenskab

HTML DOM reference manual:Style objekt