Beispiel
Holen Sie sich alle Elemente mit dem angegebenen Klassennamen:
var x =
document.getElementsByClassName("example");
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die getElementsByClassName() Methode liefert eine Auflistung aller Elemente in dem Dokument mit dem angegebenen Klassennamen als NodeList Objekt.
Das NodeList Objekt stellt eine Sammlung von Knoten. Die Knoten können durch Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die Verwendung Länge Eigenschaft des NodeList Objekt die Anzahl der Elemente mit einem bestimmten Klassennamen zu bestimmen, dann können Sie eine Schleife durch alle Elemente und extrahieren Sie die Informationen , die Sie wollen.
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die das Verfahren vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Syntax
document.getElementsByClassName( classname )Parameterwerte
| Parameter | Art | Beschreibung |
|---|---|---|
| classname | String | Erforderlich. Der Klassenname der Elemente, die Sie erhalten möchten. Für die Suche nach mehreren Klassennamen, trennen Sie diese mit Leerzeichen, wie "test demo" - "test demo" . |
Technische Details
| DOM Version: | Core Level 1 Document Object |
|---|---|
| Rückgabewert: | Ein NodeList Objekt, eine Sammlung von Elementen mit dem angegebenen Klassennamen darstellen. Die Elemente in der zurückgegebenen Auflistung sortiert werden, wie sie im Quelltext angezeigt. |
Mehr Beispiele
Beispiel
Holen Sie sich alle Elemente sowohl mit dem "example" und "color" Klassen:
var x =
document.getElementsByClassName("example color"); Versuch es selber " Beispiel
Finden Sie heraus, wie viele Elemente mit class = „example“ gibt es in dem Dokument (die Länge Eigenschaft des NodeList-Objekt):
var x =
document.getElementsByClassName("example").length; Versuch es selber " Beispiel
Ändern Sie die Hintergrundfarbe aller Elemente mit class = „example“:
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS .class- Selector
HTML DOM Referenz: Element. getElementsByClassName()
HTML DOM Referenz: className Property
HTML DOM Referenz: classList Property
HTML DOM Referenz: Style - Objekt