Warum ändert getElementsByClassName() nur jede andere Klasse?

Unerwünschtes Klassenänderungsmuster: Jede andere Klasse ist betroffen

Bei der Verwendung von getElementsByClassName() in JavaScript stehen Sie vor einer Herausforderung. Wenn Sie versuchen, die Klasse jedes Elements zu ändern, stoßen Sie auf ein Problem, bei dem nur jede andere Klasse geändert wird.

Ursache: Änderung von HTMLCollection

Die zugrunde liegende Ursache von Dieses Problem liegt in der Natur der von getElementsByClassName() zurückgegebenen HTMLCollection. Wenn Sie die Klasse eines Elements innerhalb der Sammlung ändern, wird die Sammlung selbst aktualisiert und das Element ist nicht mehr enthalten. Das bedeutet, dass Sie beim Durchlaufen der Sammlung effektiv alternative Elemente überspringen.

Lösung: Durch Array iterieren

Um dieses Problem zu beheben, können Sie durch ein iterieren Array der ursprünglichen Sammlung, anstatt die Sammlung im weiteren Verlauf zu ändern. Dadurch wird sichergestellt, dass Sie die Klassenänderung auf jedes Element anwenden, unabhängig von vorherigen Änderungen.

Aktualisierter Code mit For-Schleife:

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

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

Hinweise:

• Anstatt die Klasse jedes Elements einzeln zu ändern, können Sie eine for-Schleife verwenden, um die Elemente zu durchlaufen und zu erstellen die Klassenänderung.
• Dieser aktualisierte Code weist die „block-selected“-Klasse dem ersten Element des blockSet-Arrays für jede Iteration zu.
• Durch die Verwendung eines Arrays vermeiden Sie das Problem der Sammlung wird während der Iteration geändert.

Das obige ist der detaillierte Inhalt vonWarum ändert getElementsByClassName() nur jede andere Klasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!