HTML-DOM -getElementsByClassName()- Methode
❮ Das Element-ObjektBeispiel
Ändern Sie den Text des ersten Listeneintrags mit class="child" (Index 0) in einer Liste mit class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Methode getElementsByClassName() gibt eine Sammlung der untergeordneten Elemente eines Elements mit dem angegebenen Klassennamen als NodeList-Objekt zurück.
Das NodeList-Objekt repräsentiert eine Sammlung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Tipp: Sie können die length -Eigenschaft des NodeList-Objekts verwenden, um die Anzahl der untergeordneten Knoten mit dem angegebenen Klassennamen zu bestimmen, dann können Sie alle Knoten durchlaufen und die gewünschten Informationen extrahieren.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Syntax
element.getElementsByClassName(classname)
Parameterwerte
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Technische Details
| DOM-Version: | Elementobjekt der Kernebene 1 |
|---|---|
| Rückgabewert: | Ein NodeList-Objekt, das eine Auflistung der untergeordneten Elemente der Elemente mit dem angegebenen Klassennamen darstellt. Die Elemente in der zurückgegebenen Auflistung werden so sortiert, wie sie im Quellcode erscheinen. |
Mehr Beispiele
Beispiel
Ändern Sie die Hintergrundfarbe des zweiten Elements mit class="child" innerhalb eines <div>-Elements:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Beispiel
Finden Sie heraus, wie viele Elemente mit class="child" innerhalb eines <div>-Elements sind (unter Verwendung der length-Eigenschaft des NodeList-Objekts):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Beispiel
Ändern Sie die Hintergrundfarbe des ersten Elements mit den Klassen "child" und "color" innerhalb eines Elements mit class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Beispiel
Ändern Sie die Hintergrundfarbe aller Elemente mit class="child" innerhalb eines <div>-Elements:
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Verwandte Seiten
CSS-Tutorial: CSS-Syntax
CSS-Referenz: CSS .class Selector
HTML-DOM-Referenz: document.getElementsByClassName()
HTML-DOM-Referenz: className-Eigenschaft
HTML-DOM-Referenz: classList-Eigenschaft
HTML-DOM-Referenz: HTML-DOM-Stilobjekt
❮ Das Element-Objekt