getElementsByClassName和querySelectorAll之间的区别?

时间:2015-05-27 04:24:17

标签: javascript

根据我的理解,

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

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

从所有元素中删除该类时
for (var i = 0; i < elems.length; ++i)
  elems[i].className = "";

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

发生了什么?

2 个答案:

答案 0 :(得分:23)

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

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

答案 1 :(得分:3)

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

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