Warum wirkt sich das Ändern von Klassennamen mit „getElementsByClassName()' nur auf jedes andere Element in JavaScript aus?

className ändert jedes andere Klassenproblem

Problem

In JavaScript gibt die Methode getElementsByClassName() eine HTMLCollection zurück, die Elemente enthält die eine bestimmte CSS-Klasse gemeinsam nutzen. Es wurde jedoch beobachtet, dass beim Anwenden von Klassenänderungen auf diese Elemente nur alternative Klassen betroffen sind.

Ursache

Dieses Problem tritt auf, weil die von getElementsByClassName() zurückgegebene HTMLCollection eine Live-Sammlung ist. Dies bedeutet, dass alle Änderungen am DOM, wie z. B. das Ändern von Klassennamen, die Sammlung selbst ändern.

Wenn die className-Eigenschaft geändert wird, wird das Element aus der Sammlung entfernt. Dies führt dazu, dass die Größe der Sammlung abnimmt und nachfolgende Versuche, über seinen Index auf dasselbe Element zuzugreifen, dazu führen können, dass alternative Elemente übersprungen werden.

Lösung

Um dieses Problem zu beheben, gibt es zwei Möglichkeiten Lösungen:

1. Ändern Sie nur den Klassennamen des ersten Elements

Anstatt die gesamte HTMLCollection zu durchlaufen und den Klassennamen jedes Elements zu ändern, ändern Sie nur den Klassennamen des ersten Elements.

for (var i = 0; i < blockSetLength; i++) {
  blockSet[0].className = "block-selected";
}

2. Verwenden Sie eine statische Array-ähnliche Datenstruktur

Anstatt getElementsByClassName() zu verwenden, das eine Live-Sammlung zurückgibt, erstellen Sie eine statische Array-ähnliche Datenstruktur. Dies kann erreicht werden, indem Sie die Funktion Array.from() verwenden, um die HTMLCollection in ein reguläres Array zu konvertieren, oder indem Sie manuell ein Array erstellen und es mit den HTMLCollection-Elementen füllen.

const blockSetArray = Array.from(blockSet);

for (var i = 0; i < blockSetArray.length; i++) {
  blockSetArray[i].className = "block-selected";
}

Das obige ist der detaillierte Inhalt vonWarum wirkt sich das Ändern von Klassennamen mit „getElementsByClassName()' nur auf jedes andere Element in JavaScript aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!