Beispiel
Ändern Sie den Text der ersten Listenelement mit class = „Kind“ (index 0) in einer Liste mit class = „example“:
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Bevor Sie den Text ändern:
- Coffee
- Tea
Nach dem Ändern des Textes:
- Milk
- Tea
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die getElementsByClassName() Methode liefert eine Sammlung eines Kind - Elemente des Elements mit den 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 untergeordneten Knoten mit dem angegebenen Klassennamen zu bestimmen, dann können Sie eine Schleife durch alle Knoten 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
element .getElementsByClassName( classname )Parameterwerte
| Parameter | Art | Beschreibung |
|---|---|---|
| classname | String | Erforderlich. Der Klassenname der untergeordneten Elemente Sie erhalten möchten. Für die Suche nach mehreren Klassennamen, trennen Sie diese mit Leerzeichen, wie "child color" . |
Technische Details
| DOM Version: | Core Level 1 Element Object |
|---|---|
| Rückgabewert: | Ein NodeList Gegenstand, die eine Sammlung der Kind-Elemente Elemente mit den angegebenen Klassennamen. Die Elemente in der zurückgegebenen Auflistung sortiert werden, wie sie im Quelltext angezeigt. |
Mehr Beispiele
Beispiel
Ändern Sie die Hintergrundfarbe des zweiten Elements mit class = „Kind“ innerhalb eines <div> Element:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red"; Versuch es selber " Beispiel
Finden Sie heraus , wie viele Elemente mit class = „Kind“ gibt es innerhalb eines <div> Element (die Länge Eigenschaft des NodeList - Objekt):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;Das Ergebnis von x wird sein:
3 Versuch es selber " Beispiel
Ändern Sie die Hintergrundfarbe des ersten Elements sowohl mit dem "child" und "color" Klasse innerhalb eines Elements mit class = „example“:
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red"; Versuch es selber " Beispiel
Ändern Sie die Hintergrundfarbe aller Elemente mit class = „Kind“ innerhalb eines <div> Element:
var x = document.getElementById("myDIV");
var y =
x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++)
{
y[i].style.backgroundColor = "red";
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS .class- Selector
HTML DOM Referenz: Dokument. getElementsByClassName()
HTML DOM Referenz: className Property
HTML DOM Referenz: classList Property
HTML DOM Referenz: HTML DOM Style - Objekt