HTMLCollection 與 NodeList：為什麼修改 HTMLCollection 的元素會影響其大小？

HTMLCollection 與NodeList：問題的根源

所提供的腳本遇到問題，因為它操作的是HTMLCollection 而不是比NodeList 來修改CSS 類別。 HTMLCollection 是一個即時集合，這意味著它的內容會隨著 DOM（文件物件模型）的變更而自動更新。此行為會導致在修改元素的類別名稱時改變集合大小的意外結果。每次更改元素的類別名稱時，集合都會排除該元素，從而導致其大小減小。

解決方案：僅迭代第一個元素

要解決此問題，了解更改集合中任何元素的類別名稱會影響集合本身至關重要。因此，最佳解決方案是僅修改第一個元素的類別名，確保集合的大小保持不變。

For 迴圈進行類別名稱修改

此腳本可以使用 for 循環遍歷 HTMLCollection 中的每個元素，而不是手動更改多個元素的類別名稱。這種方法允許一致的類別名稱修改，而不影響集合的大小。

增強的程式碼範例

修改過的程式碼使用for 迴圈來迭代HTMLCollection 並更改每個元素的類別名稱"block-selected":

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

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

結論

理解HTMLCollections 和 NodeList 之間的差異對於 JavaScript 程式設計至關重要。透過利用正確的資料結構來完成手邊的任務，開發人員可以避免意外後果並有效地實現預期結果。

以上是HTMLCollection 與 NodeList：為什麼修改 HTMLCollection 的元素會影響其大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！