HTML DOM getElementsByClassName()-Methode
DokumentobjektBeispiel
Alle Elemente mit dem angegebenen Klassennamen abrufen:
Selbst ausprobieren »
Definition und Verwendung
Die getElementsByClassName()-Methode gibt eine Sammlung aller Elemente mit dem angegebenen Klassennamen im Dokument als NodeList-Objekt zurück.
Das NodeList-Objekt stellt eine geordnete Liste von Knoten dar. Im NodeList-Objekt können wir auf die Knoten in der Liste über ihre Indexnummern zugreifen (beginnend bei 0).
Tipp:Sie können die length-Eigenschaft des NodeList-Objekts verwenden, um die Anzahl der Elemente mit dem angegebenen Klassennamen zu bestimmen und die Elemente zu durchlaufen, um das benötigte Element zu erhalten.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Methode vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Syntax
Parameters
| Parameter | Type | Beschreibung |
|---|---|---|
| classname | String | Erforderlich. Der Klassenname des/der Elemente, die Sie abrufen möchten. Mehrere Klassennamen werden durch Leerzeichen getrennt, wie "test demo". |
Technische Details
| DOM-Version: | Core Level 1 Document Object |
|---|---|
| Rückgabewert: | Ein NodeList-Objekt, das eine Sammlung von Elementen mit dem angegebenen Klassennamen darstellt. Die Elemente sind in der Reihenfolge sortiert, in der sie im Code erscheinen. |
Weitere Beispiele
Beispiel
Rufen Sie alle Elemente mit den Klassennamen "example" und "color" ab und ändern Sie ihre Farbe:
Selbst ausprobieren »
Beispiel
Finden Sie heraus, wie viele Elemente mit class="example" im Dokument vorhanden sind (unter Verwendung der length-Eigenschaft des NodeList-Objekts):
Selbst ausprobieren »
Beispiel
Ändern Sie die Hintergrundfarbe aller Elemente mit class="example":
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Selbst ausprobieren »
Verwandte
CSS-Tutorial:CSS-Selektoren
CSS-Referenz:CSS .classSelektoren
HTML-DOM-Referenz:element.getElementsByClassName()
HTML-DOM-Referenz:className-Eigenschaft
HTML-DOM-Referenz:HTML-DOM-classList-Eigenschaft
HTML-DOM-Referenz:HTML-DOM-Style-Objekt
Andere Erweiterungen