Latest web development tutorials

HTML-DOM getElementsByClassName () -Methode

Document Object Reference Document Object

Beispiele

Holen Sie sich alle Elemente von Klassenname:

var x = document.getElementsByClassName ( "Beispiel" );

Versuchen »

Definitionen und Verwendung

getElementsByClassName () Methode gibt alle Elemente in dem Dokument den Klassennamen der Sammlung angeben, wie NodeList Objekt.

NodeList Objekt stellt eine Knotenliste um. NodeList Objekt wir die Liste der Knoten (ab 0 Indexnummer) durch die Knotenliste des Knotens Indexnummer zugreifen können.

Tipp: Sie können das die NodeList Objekt Länge Eigenschaft , um die Anzahl der Elemente von Klassennamen zu bestimmen und die verschiedenen Elemente des Zyklus der Elemente , die Sie brauchen.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Methode Versionsnummer zu unterstützen.

Weg
getElementsByClassName () 4.0 9.0 3.0 3.1 9.5

Grammatik

document.getElementsByClassName (classname)

Parameter

Parameter Typ Beschreibung
classname Schnur Muss. Elementklassen müssen Sie den Namen zu erhalten.

Mehrere Klassennamen durch Leerzeichen getrennt, wie "Test-Demo".

Technische Beschreibung

DOM-Version: Core Level 1 Document Object
Rückkehr: NodeList Objekt, das das Element darstellt, gibt den Klassennamen der Sammlung. Die Reihenfolge der Elemente in der Sammlung ihrer Art in der Reihenfolge ihres Auftretens im Code.
Beispiele

Weitere Beispiele

Beispiele

Ruft das "Beispiel" und "Farbe" den Klassennamen aller Elemente:

var x = document.getElementsByClassName( "example color" );

Versuchen »

Beispiele

Wie viele style class = "Beispiel" Elemente (die Länge Eigenschaft des NodeList mit), um das Dokument zu sehen sind:

var x = document.getElementsByClassName( "example" ).length;

Versuchen »

Beispiele

Ändern Sie die Hintergrundfarbe aller Stile class = "Beispiel" Elemente:

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

Versuchen »

Verwandte Seiten

CSS Tutorial: CSS - Selektoren

CSS Referenz: CSS - Selektoren .class-

HTML - DOM - Referenzhandbuch: Element .getElementsByClassName ()

HTML - DOM Referenz: Attribut classname

HTML - DOM - Referenzhandbuch: HTML - DOM - Attribute classlist

HTML - DOM - Referenzhandbuch: HTML DOM Style - Objekt

Document Object Reference Document Object