為什麼更改「className」僅會影響 HTMLCollection 中的所有其他元素？

className 僅更改每個其他類別

在此程式碼片段中，遇到了一個問題，即className 屬性僅針對每個其他元素更改在一個集合中。目標是了解此行為背後的原因並找到解決方案。

提供的程式碼利用 getElementsByClassName() 方法來擷取具有「block-default」類別的 HTML 元素。然後，它繼續將集合中每個元素的 className 屬性修改為「區塊選擇」。然而，結果是只更新了替代元素，而其他元素則保留了原始的“block-default”類別。

罪魁禍首在於 HTMLCollections 的本質。這些集合是即時的並且反映了 DOM 的當前狀態。當元素的 className 屬性被修改時，集合本身也會受到影響。具體來說，由於修改的元素從清單中刪除，集合的大小會減少。

要修正此問題，請務必記住，對集合元素的任何後續變更都會影響其餘元素的索引。解決方案是一致地僅更改第一個元素的 className。

一種方法涉及迭代集合並重複修改第一個元素。

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

此方法可確保第一個元素一致無論集合如何更改，都會更新。

或者，使用擴充運算子可以將 HTMLCollection 轉換為數組，從而在修改元素。

var blockArray = [...blockSet];

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

無論哪種情況，僅修改第一個元素的 className，都可以實現更改集合中每個元素的類別的預期結果。

以上是為什麼更改「className」僅會影響 HTMLCollection 中的所有其他元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！