getElementsByClassName和querySelectorAll之间的区别是什么？

Question

15

据我了解，

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

应该返回相同的内容。然而，当我尝试使用代码从所有元素中移除该类时

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

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

发生了什么？

- user1778856

2个回答

6

为了进一步解释Anirudha的回答，当您更改通过getElementsByClassName检索到的元素的类名时，您会减少结果数量（因为列表中可用的元素仅在此处是因为它们具有类名）。

因此，每次迭代都会减少elems.length属性一个，您只能遍历一半的元素。

- Thriggle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anirudha · Accepted Answer

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

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