Menu
I am wondering about this topic for quite a while. The methods in question are the following:
getElementsByTagNamegetElementsByClassNamegetElementsByNamequerySelectorAllAs far as I know, those DOM methods are the only methods which are able to return frozen or live NodeLists. For some of those methods, order is defined by W3C spec. For instance, http://www.w3.org writes the following for NodeLists returned by querySelectorAll
The querySelectorAll() methods on the Document, DocumentFragment, and Element interfaces must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order. If there are no matching nodes, the method must return an empty NodeList.
However, I couldn't find similar clear specifications for the the other methods I mentioned. My questions here are:
To be absolute clear:
<div>this</div>
<div>is</div>
<div>a demo</div>
// is this always guaranteed to be "<div>is</div>"
document.querySelectorAll('div')[1]
756
The querySelectorAll() method on the NodeSelector interface must, when invoked, return a NodeList containing all of the matching Element nodes within the node's subtrees, in document order. If there are no such nodes, the method must return an empty NodeList.
The querySelector() method returns the first child element that matches a specified CSS selector(s) of an element. Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.
An HTMLCollection is a collection of document elements. A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes). HTMLCollection items can be accessed by their name, id, or index number. NodeList items can only be accessed by their index number.
The key way to think about NodeLists vs. Arrays: NodeLists are a language-agnostic way to access DOM elements, and Arrays are a JavaScript object you can use to contain collections of stuff.
Yes. All of them are in document order / tree order.
getElementsByName (DOM Level-2-HTML) returns a NodeList
querySelectorAll (Selectors API) returns a NodeList "in document order"getElementsByTagName (DOM) returns a HTMLCollection
getElementsByClassName (DOM) returns a HTMLCollection
HTMLCollections and NodeLists are both specified to have
the elements are sorted in tree order.
when those are accessed via indizes.
I think that those specs (even though the linked versions might be newer than some implementations) are reliably implemented by all browsers, mostly because tree order is the most logical and easy-to-code one. Yet, you might need to watch out that some browsers might return lists consisting of different elements because their matching of nodes differs. I could think of some quirks when determining the name of an element.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
