admin管理员组

文章数量:1231080

I'm calling

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

in my js code on html.

Will I get the same order of elements everytime I call?

I'm calling

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

in my js code on html.

Will I get the same order of elements everytime I call?

Share Improve this question asked Feb 20, 2016 at 16:23 Sergei PodlipaevSergei Podlipaev 1,4211 gold badge15 silver badges35 bronze badges 2
  • That's almost a dupe -> stackoverflow.com/questions/35470813/… – adeneo Commented Feb 20, 2016 at 16:28
  • Note: getElementsByClassName only accepts a single argument, the second argument you're passing it will be ignored. – T.J. Crowder Commented Feb 20, 2016 at 16:42
Add a comment  | 

1 Answer 1

Reset to default 41

Yes, you will, on conforming implementations (I don't know of any non-conforming ones), but what it returns is not an array, it's an HTMLCollection. The results will be in tree order¹ (sometimes called document order): top-down, depth-first traversal — which is a fancy way of saying, what it looks like when you look at the markup. :-)

For example, with this document:

<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") will reliably list them in order: d1, d2, d3, d4, d5. Try it here:

for (const el of document.getElementsByClassName("a")) {
    console.log(el.id);
}
<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>

Other notes:

  • The getElementsByClassName method returns a live HTMLCollection, which means that if you add, remove, or change elements, the collection you already have is updated. That can be useful and powerful, or surprising, depending on what you're doing with it.
  • The related method querySelectorAll returns a snapshot NodeList, e.g., not a live HTMLCollection.

Example:

const byClassName = document.getElementsByClassName("a");
const bySelector = document.querySelectorAll(".a");
console.log("Before adding another one:");
console.log("byClassName.length = " + byClassName.length);
console.log("bySelector.length = " + bySelector.length);
const 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>


¹ How do we know that? Because getElementsByClassName(classNames) is specified to return "the list of elements with class names classNames," which says it returns an HTMLCollection; if we look at HTMLCollection, we see it's a "collection of elements," and in that link we find that the "...collection then represents a view of the subtree rooted at the collection’s root, containing only nodes that match the given filter. The view is linear. In the absence of specific requirements to the contrary, the nodes within the collection must be sorted in tree order." Since getElementsByClassName doesn't provide specific requirements to the contrary, it's in tree order.

本文标签: javascriptOrder of elements in documentgetElementsByClassName() arrayStack Overflow