HTML-DOM-Dokument getElementsByClassName()
Beispiel
Holen Sie sich alle Elemente mit class="example":
const collection = document.getElementsByClassName("example");
Holen Sie sich alle Elemente mit den Klassen "example" und "color":
const collection = document.getElementsByClassName("example color");
Weitere Beispiele unten.
Definition und Verwendung
Die getElementsByClassName()
Methode gibt eine Sammlung von Elementen mit einem oder mehreren angegebenen Klassennamen zurück.
Die getElementsByClassName()
Methode gibt eine HTMLCollection zurück .
Die getElementsByClassName()
Eigenschaft ist schreibgeschützt.
HTMLCollection
Eine HTMLCollection ist eine Sammlung von HTML-Knoten.
Auf Knoten in einer Sammlung kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.
Die Eigenschaft length gibt die Anzahl der Elemente in der Sammlung zurück.
Siehe auch:
Die Document getElementById()-Methode
Die Document getElementsByTagName()-Methode
Die Document querySelector()-Methode
Syntax
document.getElementsByClassName(classname)
Parameter
Parameter | Description |
classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Rückgabewert
Typ | Beschreibung |
Objekt. | Ein HTMLCollection- Objekt. Eine Sammlung von Elementen mit dem angegebenen Klassennamen. Die Elemente werden so sortiert, wie sie im Dokument erscheinen. |
Mehr Beispiele
Anzahl der Elemente mit class="example":
let numb = document.getElementsByClassName("example").length;
Ändere die Hintergrundfarbe aller Elemente mit class="example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Verwandte Seiten
CSS-Tutorial: CSS-Syntax
CSS-Referenz: CSS .class Selector
HTML-DOM-Referenz: element .getElementsByClassName()
HTML-DOM-Referenz: className-Eigenschaft
HTML-DOM-Referenz: classList-Eigenschaft
HTML-DOM-Referenz: Style-Objekt
Browser-Unterstützung
document.getElementsByClassName()
ist eine Funktion von DOM Level 1 (1998).
Es wird in allen Browsern vollständig unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |