HTML DOM Element getElementsByClassName() Methode

Definition und Verwendung

getElementsByClassName() Die Methode gibt eine Sammlung von Unterelementen mit der angegebenen Klassennamen zurück, als NodeList-Objekt.

Weitere Informationen:

classList-Attribut

className-Attribut

querySelector() Methode

querySelectorAll() Methode

getElementsByTagName() Methode

HTML DOM Style-Objekt

Tutorial:

CSS-Syntax

CSS-Selektoren

CSS-Selektoren-Referenzhandbuch

NodeList

NodeList Ist eine Sammlung von knotenähnlichen Array-ähnlichen Knoten (Listen).

Sie können die Knoten in der Liste über Indizes (Indizes) erreichen. Der Index beginnt bei 0.

length-AttributGibt die Anzahl der Knoten in der Liste zurück.

Beispiel

Beispiel 1

Verwenden Sie class="child", um den Text des ersten Listenelements zu ändern:

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

Selbst ausprobieren

Beispiel 2

Anzahl der Elemente mit class="child" im "myDIV":

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

Selbst ausprobieren

Beispiel 3

Ändern Sie die Größe des zweiten Elements von class="child":

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

Selbst ausprobieren

Beispiel 4

Verwenden Sie die Klassen "child" und "color" im zweiten Element von class="example", um die Größe des ersten Elements zu ändern:

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

Selbst ausprobieren

Beispiel 5

Ändern Sie die Farbe aller Elemente mit class="child" im "myDIV":

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

Selbst ausprobieren

Syntax

element.getElementsByClassName(classname)

Parameter

Parameter Beschreibung
classname

Erforderlich. Klassename des Kindelements.

Mehere Namen mit Leerzeichen trennen (z.B. "child color").

Rückgabewert

Typ Beschreibung
NodeList

Kinder der Elemente mit der angegebenen Klassennamen.

Elemente werden in der Reihenfolge ihrer appearance im Quellcode sortiert.

Browserunterstützung

element.getElementsByClassName() Es ist eine DOM Level 1 (1998) Eigenschaft.

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung