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

Question

我在打电话

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

在我的js代码上的HTML.

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

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返回快照 HTMLCollection,例如,不是"实时".

例:

var byClassName = document.getElementsByClassName("a");
var bySelector = document.querySelectorAll(".a");
snippet.log("Before adding another one:");
snippet.log("byClassName.length = " + byClassName.length);
snippet.log("bySelector.length = " + bySelector.length);
var div = document.createElement("div");
div.className = "a"
document.body.appendChild(div);
snippet.log("AFTER adding another one:");
snippet.log("byClassName.length = " + byClassName.length);
snippet.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>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>