javascript - 访问 HTMLCollection/NodeList 中的每个元素

Question

我想访问实时 HTMLCollection 或 NodeList 中的每个元素（仅使用 JavaScript，不使用 jQuery 或任何其他 JavaScript 库），例如由返回的集合var elements = document.getElementsByClassName('class-name');

如果 DOM 没有改变，那么我可以用for循环来做到这一点：

for(var i=0; i<elements.length; i++)
{
    //Do something with elements[i]
}

但是在for循环仍在运行并且添加或删除带有 class 的元素的情况下该怎么办class-name。如果 anelement已被删除或添加，则索引将更改。

那么，我怎样才能确保 whilefor循环正在运行，仅使用 JavaScript 不会element丢失elements任何内容。

Answer 1

在给定时间只有一个脚本在运行。在您的脚本运行时，DOM 可能发生的唯一更改是您的脚本所做的更改。所有其他任务、事件等都会耐心等待您的脚本完成执行。

所以

• 不用担心 DOM 的外部变化，没有
• 跟踪您的代码所做的更改

你会没事的。

Answer 2

“现场”系列只是非常尴尬的默认设置，让人们感到惊讶。我建议您简单地使用querySelectorAll它不仅比 gEBCN 更受支持，而且返回快照而不是“实时”集合。

我看到，即使是集合是“活”的概念也会引起混乱。它不是实时的，但基本上属性是 getter，例如[i]实际调用.item(i)- 该方法动态地检索使集合显示为实时的元素。

还有更多。有些人继续使用这些方法，因为他们错误地认为由于基准测试失败，它们的速度要快得多。在这些基准测试中，仅比较直接方法调用，并且在您尝试检索元素之前，不认为“实时”集合不做任何工作。

Answer 3

据我所知，for循环不是异步的，所以元素不能改变，因为for循环在改变发生之前完全执行，或者改变应该在for循环之前发生。