Element: getElementsByClassName() Methode

names

Ein String, der einen oder mehrere Klassennamen enthält, die durch Leerzeichen getrennt sind, um darauf abzugleichen.

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

Wie immer ist die zurückgegebene Sammlung live, was bedeutet, dass sie immer den aktuellen Zustand des DOM-Baums widerspiegelt, der am Element verwurzelt ist, auf dem die Funktion aufgerufen wurde. Wenn neue Elemente, die mit names übereinstimmen, zum Unterbaum hinzugefügt werden, erscheinen sie sofort in der Sammlung. Ebenso, wenn ein vorhandenes Element, das nicht mit names übereinstimmt, seine Klassen so anpasst, dass es übereinstimmt, erscheint es sofort in der Sammlung.

Das Gegenteil ist auch wahr; sobald Elemente nicht mehr mit der Menge von Namen übereinstimmen, werden sie sofort aus der Sammlung entfernt.

Um nach Elementen zu suchen, die unter ihren Klassen eine bestimmte Klasse einschließen, geben wir einfach diesen Klassennamen beim Aufruf von getElementsByClassName() an:

element.getElementsByClassName("test");

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

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

Um Elemente zu finden, deren Klassenlisten sowohl die red- als auch die test-Klassen beinhalten:

element.getElementsByClassName("red test");

Sie können entweder die item()-Methode auf der zurückgegebenen HTMLCollection oder die Standard-Array-Syntax verwenden, um einzelne Elemente in der Sammlung zu untersuchen. Der folgende Code funktioniert jedoch nicht wie erwartet, da "matches" sich ändern wird, 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:

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 Nachfahrelemente mit der Klasse "color-box", fügt die Klasse "hue-frame" hinzu, indem er item(0) aufruft, und entfernt dann "color-box" (unter Verwendung der Array-Notation). Ein weiteres Element (falls vorhanden) wird dann zu item(0).

Wir können auch Array-Methoden auf jede HTMLCollection anwenden, 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",
);