document.querySelector是如何实现的？

Question

我想这个问题的答案取决于你使用的浏览器，但我想这只会让它变得更有趣。

我想知道querySelector()方法是如何实际实现的。同样，我对querySelectorAll()以及getElementById()和getElementByClassName()等其他方法感到好奇。

它是深度优先搜索，广度优先搜索，还是利用一些辅助数据结构，如全局哈希表作为注册表？

Answer 1

您要求的所有信息都在您提供的链接中：

  

querySelector ：返回文档中的第一个元素（使用文档节点的深度优先预订遍历 |通过文档标记中的第一个元素并通过顺序迭代节点按子节点数量的顺序）与指定的选择器组匹配。

  

querySelectorAll ：返回与指定的选择器组匹配的文档中的元素列表（使用文档节点的深度优先预订遍历）。返回的对象是NodeList。

  

getElementById ：按ID返回对元素的引用; ID是一个字符串，可用于标识元素;它可以使用HTML中的id属性或脚本来建立。

作为ID应唯一 - 不存在订单问题

  

getElementsByClassName ：返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）;它将仅返回具有给定类名的指定根元素的后代元素。

Answer 2

querySelectorAll在此处有详细记录：

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

  

返回与指定的选择器组匹配的文档中的元素列表（使用文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

另一方面，getElementsByClassName

的文档

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

没有相同的保证。

事实上，我在一些旧浏览器上遇到了麻烦 - 在各种浏览器上以破坏的方式返回内容。虽然，这可以追溯到IE6，并且可以在HTML5 doctype下稳定下来。

如果你必须100％确保文件顺序，那么总有旧的walkTheDom代码。

Recursion down DOM tree

Answer 3

获取HTML文档后，会将其传递给HTML解析器，该解析器将遍历文档并创建内容树。

这个内容树实际上是一个由许多本机函数使用的全局哈希表。

此信息适用于 Firefox