Warum wirkt sich die Änderung von „className' nur auf jedes andere Element in einer HTMLCollection aus?

className ändert sich nur bei jeder anderen Klasse

In diesem Codeausschnitt ist ein Problem aufgetreten, bei dem sich die className-Eigenschaft nur für jedes andere Element ändert in einer Sammlung. Ziel ist es, den Grund für dieses Verhalten zu verstehen und eine Lösung zu finden.

Der bereitgestellte Code nutzt die Methode getElementsByClassName(), um HTML-Elemente mit der Klasse „block-default“ abzurufen. Anschließend wird die className-Eigenschaft jedes Elements in der Sammlung in „block-selected“ geändert. Das Ergebnis ist jedoch, dass nur alternative Elemente aktualisiert werden, während für andere die ursprüngliche „Block-Standard“-Klasse verbleibt.

Der Übeltäter liegt in der Natur von HTMLCollections. Diese Sammlungen sind live und spiegeln den aktuellen Stand des DOM wider. Wenn die className-Eigenschaft eines Elements geändert wird, ist auch die Sammlung selbst betroffen. Insbesondere nimmt die Größe der Sammlung ab, da das geänderte Element aus der Liste entfernt wird.

Um dieses Problem zu beheben, ist es wichtig zu bedenken, dass sich alle nachfolgenden Änderungen an den Elementen der Sammlung auf die Indizes der verbleibenden Elemente auswirken. Die Lösung besteht darin, nur den Klassennamen des ersten Elements konsistent zu ändern.

Eine Methode besteht darin, die Sammlung zu durchlaufen und das erste Element wiederholt zu ändern.

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

Dieser Ansatz stellt sicher, dass das erste Element konsistent ist aktualisiert, unabhängig von Änderungen an der Sammlung.

Alternativ kann die Verwendung des Spread-Operators die HTMLCollection in ein Array konvertieren, was mehr Flexibilität bei der Änderung ermöglicht Elemente.

var blockArray = [...blockSet];

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

In beiden Fällen kann durch Ändern nur des Klassennamens des ersten Elements das gewünschte Ergebnis der Änderung der Klasse jedes Elements in der Sammlung erreicht werden.

Das obige ist der detaillierte Inhalt vonWarum wirkt sich die Änderung von „className' nur auf jedes andere Element in einer HTMLCollection aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!