HTML DOM Document getElementsByClassName() - Methode

Definition und Verwendung

getElementsByClassName() Die Methode gibt die Sammlung der Elemente mit der angegebenen Klassennamen zurück.

getElementsByClassName() Die Methode gibt zurück HTMLCollection.

getElementsByClassName() Die Eigenschaft ist schreibgeschützt.

HTMLCollection

HTMLCollection Es ist eine Sammlung ähnlich einem Array von HTML-Elementen (Liste).

Man kann auf die Elemente der Sammlung über Index zugreifen (beginnend bei 0).

length Die Eigenschaft gibt die Anzahl der Elemente in der Sammlung zurück.

Weitere Informationen:

getElementById() - Methode

getElementsByTagName() - Methode

querySelector() - Methode

querySelectorAll() - Methode

HTMLCollection-Objekt

Beispiel

Beispiel 1

Erhalten Sie alle Elemente mit der Klasse "example":

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

Versuchen Sie es selbst

Beispiel 2

Erhalten Sie alle Elemente, die sowohl die Klasse "example" als auch "color" haben:

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

Versuchen Sie es selbst

Beispiel 3

Anzahl der Elemente mit class="example":

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

Versuchen Sie es selbst

Beispiel 4

Ändern Sie die Hintergrundfarbe aller Elemente mit class="example":

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

Versuchen Sie es selbst

Syntax

document.getElementsByClassName("classname)

Parameter

Parameter Beschreibung
classname

Erforderlich. Der Klassename des Elements.

Sucht mehrere durch Leerzeichen getrennte Klassennamen ab, z.B. "test demo".

Rückgabewert

Typ Beschreibung
Objekt

HTMLCollection-Objekt.

Sammlung von Elementen mit angegebenem Klassennamen.

Elemente werden nach ihrer Reihenfolge im Dokument sortiert.

Browserunterstützung

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

Es wird von allen Browsern 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

Verwandte Seiten

CSS Tutorial:CSS-Syntax

CSS Referenzhandbuch:CSS .class-Selektor

HTML DOM Referenzhandbuch:element.getElementsByClassName()

HTML DOM Referenzhandbuch:className Eigenschaft

HTML DOM Referenzhandbuch:classList Eigenschaft

HTML DOM Referenzhandbuch:Style-Objekt