Warum ändert getElementsByClassName() nur die Klasse jedes anderen Elements?

ClassName-Problem mit HTMLCollection

In Ihrem JavaScript-Code verwenden Sie getElementsByClassName(), um Elemente mit der Klasse „block-default“ auszuwählen ." Wie Sie jedoch bemerkt haben, ändert sich die Klasse nur für jedes andere Element.

Das Problem liegt in der Natur der von getElementsByClassName() zurückgegebenen HTMLCollection. Es handelt sich um eine Live-Sammlung, die den aktuellen Zustand des DOM widerspiegelt. Wenn Sie den Klassennamen eines Elements ändern, wird es aus der Sammlung entfernt, sodass es nicht mehr für die weitere Auswahl verfügbar ist.

Lösung: Iterativer Ansatz

Um dieses Problem zu lösen, Sie können die HTMLCollection durchlaufen und den Klassennamen jedes Elements einzeln ändern. Dadurch stellen Sie sicher, dass jedes Element die aktualisierte Klasse erhält:

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

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

Alternative Lösung: Nur das erste Element ändern

Alternativ können Sie Änderungen vornehmen Der Klassenname des ersten Elements, da es auch nach einer Klassenänderung in der Sammlung verbleibt. Hier ist der geänderte Code:

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

Auf diese Weise müssen Sie nur den Klassennamen des ersten Elements aktualisieren und die HTMLCollection enthält weiterhin alle Elemente mit der „block-selected“-Klasse.

Hinweis: Das Durchlaufen der Elemente ist eine bessere Lösung für praktische Szenarien, in denen viele Elemente von getElementsByClassName() zurückgegeben werden können und Sie eine Leistung erbringen müssen Operationen an allen.

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