Login/Register
Using querySelectorAll(). Is the result returned by the method ordered?
Asked Answered
Solved javascriptcsscss-selectorsselectors-api
U

1

81

I'm trying to make a js code that works with multiple pages. I'm trying to use querySelectorAll() to obtain the elements form the DOM.

I need the elements to be ordered. In order to do that I may use xPath or selectors (I'd prefer to use selectors but xPath is also ok). The problem is:
Are the elements in the NodeList returned by querySelectorAll() ordered against the order that the tags appear in the HTML?

Note: I'd like to add the tag: querySelectorAll

Upolu answered 20/11, 2011 at 18:46 Comment(0)
A
97

The returned node list is ordered. A quick test proved it:

document.querySelectorAll("body, head")[0]; //Returned [object HTMLHeadElement]

Obviously, the <head> tag appears before <body> in a HTML document. The first element of the NodeList is also a <head> element, even if the selector shows body before `head.

From http://www.w3.org/TR/selectors-api/#queryselectorall:

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.

Alpestrine answered 20/11, 2011 at 18:47 Comment(8)
I already tested with firefox, chrome and Opera. All of them showed them ordered but I just wanted to know if that happens in all browsers. – Upolu
That is a CSS selector. The seperation by ',' doesn't mean any order (that part is in the spec in the part about how the selectors select) – Upolu
@Upolu Have a look at the linked w3 specification. – Alpestrine
That quote is exactly what I wanted! That answers the question, thank you. (/me still wondering why he didn't find it when he searched) – Upolu
@Upolu Google search tips: Add "w3 spec" to your search query if you're looking for an official specification, and "mdn" if you're looking for a reliable source regarding CSS/JavaScript/HTML/... – Alpestrine
+1, but I would move the quote from the spec first, since the fact that one browser implementation at one time returned results in document order doesn't prove much. – Flagpole
what's "document order"? depth first or breadth first? – Atbara
@Atbara "The term document order means a depth-first pre-order traversal of the DOM tree or subtree in question" - w3.org/TR/selectors-api/#document-order – Salvatore

© 2022 - 2024 — McMap. All rights reserved.