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元素.对底层文档结构的后续更改不会反映在返回的NodeList对象中querySelectorAll.这意味着该对象将包含一个匹配的Element节点列表,这些节点在创建列表时位于文档中.

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

Answer 2

为了扩展 Anirudha 的答案，当您更改由 检索到的实时元素列表上的类名时getElementsByClassName，您会减少结果的数量（因为列表中可用的元素仅存在于那里，因为它们具有类名）。

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