getElementsByClassName和querySelectorAll之间的区别？

Question

根据我的理解，

var elems = document.querySelectorAll(".class");
var elems = document.getElementsByClassName("class");

应该返回相同的东西。但是，当我尝试使用

从所有元素中删除该类时

for (var i = 0; i < elems.length; ++i)
  elems[i].className = "";

我得到了不同的结果。 querySelectorAll成功删除了所有元素中的类，但getElementsByClassName仅从大约一半的元素中删除了类。

发生了什么？

Answer 1

querySelectorAll不会返回实时DOM元素。对基础文档结构的后续更改不会反映在querySelectorAll返回的NodeList对象中。这意味着该对象将包含创建列表时文档中匹配的Element节点的列表。

getElementsByClassName返回实时DOM元素。对这些DOM元素所做的任何后续更改都将反映在列表中。

Answer 2

要扩展Anirudha的答案，当您更改getElementsByClassName检索到的元素的实时列表中的类名时，您将减少结果数（因为列表中的可用元素仅在那里，因为它们有班级名称）。

因此，每次迭代都会将elems.length属性减少一个，并且只能通过一半的元素。