HTML DOM Element getElementsByClassName() metoden

Definition og brug

getElementsByClassName() Metoden returnerer en samling af underelementer med den givne klasse, som NodeList objekt.

Se også:

classList egenskab

className egenskab

querySelector() metoden

querySelectorAll() metoden

getElementsByTagName() metoden

HTML DOM Style Object

Tilpasning:

CSS syntaks

CSS vælger

CSS vælger referencehåndbog

NodeList

NodeList Er en nodekollektion (liste) lignende en array.

Du kan få adgang til noderne i listen via indeks (indeks). Indekset starter fra 0.

length egenskabReturnerer antallet af noder i listen.

Eksempel

Eksempel 1

Brug class="child" til at ændre teksten på den første listeindgang:

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Prøv det selv

Eksempel 2

Antal elementer med class="child" i "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Prøv det selv

Eksempel 3

Ændre størrelsen på den anden element med class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Prøv det selv

Eksempel 4

Brug "child" og "color" klasser til at ændre størrelsen på det første element i den anden element med class="example":

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Prøv det selv

Eksempel 5

Ændr farven på alle elementer med class="child" i "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Prøv det selv

Syntaks

element.getElementsByClassName(classname)

Parameter

Parameter Beskrivelse
classname

Obligatorisk. Navnet på underelementet.

Adskil flere navne med mellemrum (f.eks. "child color").

Returværdi

Type Beskrivelse
NodeList

Inkluderer underelementer af elementer med den givne klassenavn.

Elementer sorteres efter deres optræden i kildekoden.

Browserv understøttelse

element.getElementsByClassName() er en DOM Level 1 (1998) funktion.

Alle browsere understøtter det fuldt ud:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Understøttelse 9-11 Understøttelse Understøttelse Understøttelse Understøttelse