如何在 JavaScript 中安全地迭代「getElementsByClassName」？

如何正確迭代 getElementsByClassName

在 JavaScript 中，getElementsByClassName 傳回 NodeList，而不是陣列。這可能會導致初學者出現意想不到的行為，例如迭代期間 NodeList 快速變化。

解決方案1：使用item() 方法

正確迭代NodeList ，您可以使用item() 方法：

const slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

此方法傳回NodeList 的第i 個元素。

解決方案2：將NodeList 克隆到數組

或者，您可以將NodeList 克隆到數組中並進行迭代：

const slides = document.getElementsByClassName("slide");
const slidesArray = Array.from(slides);
for (let slide of slidesArray) {
   Distribute(slide);
}

當可能存在巢狀投影片時，首選此解決方案，因為它會建立NodeList 的靜態副本。

重要提示

必須記住，在 Distribute 函數中修改 DOM 樹時，NodeList 可能會改變。因此，在修改 DOM 之前使用 item() 方法或複製 NodeList 至關重要。

以上是如何在 JavaScript 中安全地迭代「getElementsByClassName」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！