How is document.querySelector implemented?

Question

I suppose the answer to this question depends on what browser you are using, but I guess that just makes it all the more interesting.

I'm wondering how the querySelector() method is actually implemented. Similarly, I'm curious about querySelectorAll() and other methods like getElementById() and getElementByClassName() etc.

Is it a depth first search, breadth first search, or does it utilize some auxiliary data structure, like a global hash table to act as a registry?

Answer 1

All the information you asked for is in the links you provided:

querySelector: Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.

---

querySelectorAll: Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

---

getElementById: Returns a reference to the element by its ID; the ID is a string which can be used to identify the element; it can be established using the id attribute in HTML, or from script.

as an ID should be unique - there's no question of order

---

getElementsByClassName: Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

Answer 2

Once the HTML document is fetched, it is passed to the HTML parser which will go through the document and create a content tree.

This content tree is in fact a global hash table that is used by many native functions.

This information is applicable to Firefox

Answer 3

querySelectorAll is well documented here:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

On the other hand, the documentation for getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

does not have the same assurance.

In fact, I've run into trouble with that on some older browsers -- with things being returned in an undermined fashion on various browsers. Though, this dates back to IE6 and may be stabilized under the HTML5 doctype.

If you MUST, 100%, ensure the document order, there is always the old walkTheDom code.

Recursion down DOM tree