How is document.querySelector implemented?

Question

I believe the answer to this question depends on which browser you use, but I think that makes it even more interesting.

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

Is this a depth search, a first width search, or is it using some kind of auxiliary data structure, such as a global hash table, that acts like a registry?

Answer 1

All the information you requested is in the links you provided!

querySelector : returns the first element in the document (using the first order of pre-ordering document nodes | the first element in the document markup and iterating through successive nodes in order of the number of children of the nodes nodes) that correspond to the specified group of selectors.

---

querySelectorAll : returns a list of elements within a document (using the default first order bypass for document nodes) that match the specified selector group. The returned object is a NodeList.

---

getElementById : returns a link to an element by its identifier; ID is a string that can be used to identify an item; it can be set using the id attribute in HTML or from a script.

how the identifier should be unique - there is no question about the order

---

getElementsByClassName : returns a massive object of all child elements that have all the specified class names. When a document object is called, a complete document is searched, including the root node. You can also call getElementsByClassName () for any element; it will only return elements that are descendants of the specified root element with the specified class names.

Now, before anyone marks this up or down or anything else, the FIRST LINES above on OP related pages are

Answer 2

querySelectorAll well documented here:

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

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

On the other hand, the documentation for getElementsByClassName

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

doesn't have the same confidence.

In fact, I ran into problems with some old browsers - with returning things in different modes in different browsers. Although, this applies to IE6 and can be stabilized according to the HTML5 document.

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

Recursion down the DOM tree

Answer 3

After the HTML document is extracted, it is passed to the HTML parser, which will go through the document and create a data tree.

This data tree is actually a global hash table that is used by many built-in functions.

This information applies to Firefox.