Neueste Web-Entwicklung Tutorials
 

HTML DOM getElementsByClassName() Method

<Document Object

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.

Beispiele

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


<Document Object