如何正确迭代 getElementsByClassName 并避免不可预测的行为？

通过 getElementsByClassName 正确迭代

使用网页时，通过类名访问元素是一项常见任务。 getElementsByClassName 方法提供一个 NodeList，它表示匹配元素的集合。但是，迭代 NodeList 可能很棘手，尤其是在修改 DOM 时。

在您的情况下，您尝试迭代 getElementsByClassName("slide") 返回的元素并对每个元素执行操作使用分配功能。但是，由于 NodeList 性质的变化，您会遇到不可预测的行为。

解决方案是使用 item(index) 方法从 NodeList 中检索单个元素。正确迭代的方法如下：

const slides = document.getElementsByClassName("slide");

for (let i = 0; i < slides.length; i++) {
    Distribute(slides.item(i));
}

通过使用 item() 方法，您可以通过索引访问 NodeList 中的每个元素。这可以确保即使 DOM 发生变化，迭代也保持确定性。

其他注意事项

如果您的幻灯片元素可以相互嵌套，请务必注意item() 方法将为任何没有指定类名的嵌套元素返回 null。要处理嵌套幻灯片，您可以使用更高级的技术，例如查询容器内的所有元素并按类名称过滤它们。

以上是如何正确迭代 getElementsByClassName 并避免不可预测的行为？的详细内容。更多信息请关注PHP中文网其他相关文章！