Signatur
document.getElementsByClassName(names)
Beschreibung
Die Methode getElementsByClassName des Document-Interfaces gibt ein array-ähnliches Objekt aller Kind-Elemente zurück, die alle der angegebenen Klassennamen besitzen.
Wird sie auf dem document-Objekt aufgerufen, so wird das gesamte Dokument einschließlich des Wurzelknotens durchsucht. Man kann getElementsByClassName() auch auf jedem Element aufrufen; sie gibt dann nur Elemente zurück, die Nachfahren des angegebenen Wurzelelements sind und die angegebenen Klassennamen besitzen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $names Pflicht | string | — | Ein String, der die zu prüfenden Klassennamen enthält; mehrere Klassennamen werden durch Whitespace getrennt. |
Rückgabewert
Typ
HTMLCollection
Beschreibung
Eine live
HTMLCollection der gefundenen Elemente.Beispiele
Alle Elemente mit der Klasse 'test' erhalten
document.getElementsByClassName("test");Alle Elemente mit den Klassen 'red' und 'test' erhalten
document.getElementsByClassName("red test");Alle Elemente mit der Klasse 'test' innerhalb eines Elements mit der ID 'main'
document.getElementById("main").getElementsByClassName("test");Erstes Element mit der Klasse 'test' oder undefined
document.getElementsByClassName("test")[0];Array.prototype-Methoden auf HTMLCollection anwenden
const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
testElements,
(testElement) => testElement.nodeName === "DIV",
);Erstes Element mit der Klasse 'test' abrufen (JS)
const parentDOM = document.getElementById("parent-id");
const test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself
console.log(test); // HTMLCollection[1]
const testTarget = parentDOM.getElementsByClassName("test")[0]; // the first element, as we wanted
console.log(testTarget); // <p class="test">hello world 2</p>Beispiel mit mehreren Klassen (JavaScript)
// getElementsByClassName only selects elements that have both given classes
const allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
let result = "document.getElementsByClassName('orange juice')";
for (const el of allOrangeJuiceByClass) {
result += `\n ${el.textContent}`;
}
// querySelector only selects full complete matches
const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (const el of allOrangeJuiceQuery) {
result += `\n ${el.textContent}`;
}
document.getElementById("resultArea").value = result;// Wichtig · Fallstricke
Warnung: Dies ist eine live
HTMLCollection. Änderungen im DOM spiegeln sich in der Collection sofort wider. Wenn ein durch diese Collection ausgewähltes Element nicht mehr dem Selektor entspricht, wird es automatisch entfernt. Dies sollte beim Iterieren beachtet werden.