HTML DOM Element getElementsByClassName() metod

Definition och användning

getElementsByClassName() Metoden returnerar en samling av underlement med den givna klassnamnet, som NodeList-objekt.

Se också:

classList-attributet

className-attributet

querySelector() metod

querySelectorAll() metod

getElementsByTagName() metod

HTML DOM Style-objekt

Lektion:

CSS-syntax

CSS-selector

CSS-selector referenshandbok

NodeList

NodeList är en nodkollektion (lista) som liknar en array.

Du kan komma åt noder i listan via index (index). Index börjar från 0.

length-attributetReturnerar antalet noder i listan.

Exempel

Exempel 1

Ändra texten för den första listpositionen med class="child":

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

Prova själv

Exempel 2

Antalet element med class="child" i "myDIV":

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

Prova själv

Exempel 3

Ändra storleken på den andra elementet av class="child":

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

Prova själv

Exempel 4

Använd "child" och "color"-klasser för att ändra storleken på det första elementet i den andra elementet med class="example":

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

Prova själv

Exempel 5

Ändra färgen på alla element 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";
}

Prova själv

Syntax

element.getElementsByClassName(classname)

Parameter

Parameter Beskrivning
classname

Obligatoriskt. Klassnamn på underelementen.

Separera flera namn med mellanslag (t.ex. "child color").

Returvärde

Typ Beskrivning
NodeList

Inkluderar alla underelement som har en given klassnamn.

Element sorteras i den ordning de uppstår i källkoden.

Webbläsarstöd

element.getElementsByClassName() Det är en DOM Level 1 (1998)-funktion.

Alla webbläsare stöder det fullt ut:

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