為什麼使用 getElementsByClassName() 更改類別名稱僅影響 JavaScript 中的所有其他元素？

className 更改其他類別問題

問題

在JavaScript 中，getElementsByClassName() 方法傳回包含共享元素的HollName() TM指定的CSS 類別。但是，據觀察，當對這些元素應用類別變更時，只有備用類別受到影響。

原因

出現此問題是因為 getElementsByClassName() 傳回的 HTMLCollection 是即時集合。這表示對 DOM 的任何變更（例如修改類別名稱）都會修改集合本身。

當修改 className 屬性時，元素會從集合中刪除。這會導致集合的大小減小，並且隨後嘗試使用其索引存取相同元素可能會導致跳過備用元素。

解

要解決此問題，有兩種可能的方法解：

1.只修改第一個元素的ClassName

不要遍歷整個HTMLCollection 並更改每個元素的className，只需修改第一個元素的className。

2.使用類似靜態陣列的資料結構

不要使用傳回即時集合的 getElementsByClassName()，而是建立一個類似靜態陣列的資料結構。這可以透過使用 Array.from() 函數將 HTMLCollection 轉換為常規陣列來完成，或者手動建立陣列並用 HTMLCollection 元素填充它。

以上是為什麼使用 getElementsByClassName() 更改類別名稱僅影響 JavaScript 中的所有其他元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！