如何在 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中文网其他相关文章！