document.getElementsByClassName()数组中元素的顺序

Question

我给你打电话

document.getElementsByClassName('fastSearch', 'document.forms'); 

在html上的js代码中。

每次打电话时，我会得到相同的元素顺序吗？

Answer 1

是的，在符合标准的实现上，您会这样做，但是它回来了不是数组，而是HTMLCollection。结果将按文档顺序排列(自顶向下，深度优先遍历，这是一种奇特的方式，当您查看标记时它看起来是什么样子:-)。

例如，在本文件中：

<div id="d1" class="a">
    <div id="d2" class="a">
        <div id="d3" class="a"></div>
    </div>
    <div id="d4" class="a"></div>
</div>
<div id="d5" class="a"></div>

getElementsByClassName("a")将可靠地按顺序列出它们: d1、d2、d3、d4、d5。

注意，一些较旧的浏览器不支持getElementsByClassName，特别是IE8。所有含糊的东西--现代的支持它的东西--也支持更普遍的有用的querySelectorAll (它支持基于任何CSS选择器的查询)，这也是在IE8中的。

其他说明：

• 在符合规范的实现中，getElementsByClassName返回一个活动的HTMLCollection，这意味着如果您添加、删除或更改元素，您已经拥有的集合将被更新。这可能是有用的，强大的，或令人惊讶的，取决于你用它做什么。
• querySelectorAll返回快照NodeList，例如，不返回活动HTMLCollection。

示例：

​

var byClassName = document.getElementsByClassName("a");
var bySelector = document.querySelectorAll(".a");
console.log("Before adding another one:");
console.log("byClassName.length = " + byClassName.length);
console.log("bySelector.length = " + bySelector.length);
var div = document.createElement("div");
div.className = "a"
document.body.appendChild(div);
console.log("AFTER adding another one:");
console.log("byClassName.length = " + byClassName.length);
console.log("bySelector.length = " + bySelector.length);

<div id="d1" class="a">
  <div id="d2" class="a">
    <div id="d3" class="a"></div>
  </div>
  <div id="d4" class="a"></div>
</div>
<div id="d5" class="a"></div>

​