Element: getElementsByClassName() Methode

names

Ein String, der einen oder mehrere Klassennamen enthält, getrennt durch Leerzeichen.

Eine HTMLCollection, die eine live-aktualisierte Liste von jedem Element bereitstellt, das Mitglied jeder Klasse in names ist.

Wie immer ist die zurückgegebene Sammlung live, was bedeutet, dass sie stets den aktuellen Zustand des DOM-Baums widerspiegelt, der am Element verwurzelt ist, auf dem die Funktion aufgerufen wurde. Werden neue Elemente, die names entsprechen, in den Unterbaum eingefügt, erscheinen sie sofort in der Sammlung. Ebenso erscheint ein vorhandenes Element, das nicht names entspricht, aber durch Anpassung seines Klassensatzes übereinstimmt, ebenfalls sofort in der Sammlung.

Das Gegenteil gilt auch; sobald Elemente nicht mehr dem Satz von names entsprechen, werden sie sofort aus der Sammlung entfernt.

Um nach Elementen zu suchen, die unter ihren Klassen eine einzelne spezifizierte Klasse enthalten, geben wir einfach diesen Klassennamen beim Aufruf von getElementsByClassName() an:

element.getElementsByClassName("test");

Dieses Beispiel findet alle Elemente, die eine Klasse test haben, und die auch ein Nachfahre des Elements sind, das die id main hat:

document.getElementById("main").getElementsByClassName("test");

Um Elemente zu finden, deren Klassenlisten sowohl die Klasse red als auch test enthalten:

element.getElementsByClassName("red test");

Sie können entweder die item() Methode auf der zurückgegebenen HTMLCollection oder die standardmäßige Array-Syntax verwenden, um einzelne Elemente in der Sammlung zu überprüfen. Der folgende Code funktioniert jedoch nicht wie erwartet, da sich "matches" ändert, sobald eine "color-box" Klasse entfernt wird.

const matches = element.getElementsByClassName("color-box");

for (let i = 0; i < matches.length; i++) {
  matches[i].classList.remove("color-box");
  matches.item(i).classList.add("hue-frame");
}

Stattdessen verwenden Sie eine andere Methode, wie zum Beispiel:

const matches = element.getElementsByClassName("color-box");

while (matches.length > 0) {
  matches.item(0).classList.add("hue-frame");
  matches[0].classList.remove("color-box");
}

Dieser Code findet nachfolgende Elemente mit der Klasse "color-box", fügt die Klasse "hue-frame" hinzu, indem item(0) aufgerufen wird, und entfernt dann "color-box" (unter Verwendung der Array-Notation). Ein anderes Element (sofern noch eines übrig ist) wird dann item(0).

Wir können auch Array-Methoden für jede HTMLCollection verwenden, indem wir die HTMLCollection als this-Wert der Methode übergeben. Hier finden wir alle <div>-Elemente, die eine Klasse test haben:

const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === "DIV",
);