document.querySelector是如何实现的?
How is document.querySelector implemented?
我想这个问题的答案取决于您使用的是什么浏览器,但我想这只会让它变得更加有趣。
我想知道 querySelector()
method is actually implemented. Similarly, I'm curious about querySelectorAll()
and other methods like getElementById()
and getElementByClassName()
等等
它是深度优先搜索、广度优先搜索,还是利用一些辅助数据结构,如全局哈希 table 作为注册表?
获取 HTML 文档后,它会被传递给 HTML 解析器,后者将遍历文档并创建内容树。
这个内容树实际上是一个全局散列table,被许多本机函数使用。
此信息适用于Firefox
您要求的所有信息都在您提供的链接中:
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.
作为 ID 应该唯一 - 没有顺序问题
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.
querySelectorAll
在此处有详细记录:
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.
另一方面,getElementsByClassName
的文档
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
没有相同的保证。
事实上,我 运行 在某些较旧的浏览器上遇到了麻烦 -- 在各种浏览器上以破坏的方式返回了一些东西。不过,这可以追溯到 IE6,并且可以在 HTML5 文档类型下稳定下来。
如果你必须,100%,确保文档顺序,总是有旧的 walkTheDom 代码。
Recursion down DOM tree
我想这个问题的答案取决于您使用的是什么浏览器,但我想这只会让它变得更加有趣。
我想知道 querySelector()
method is actually implemented. Similarly, I'm curious about querySelectorAll()
and other methods like getElementById()
and getElementByClassName()
等等
它是深度优先搜索、广度优先搜索,还是利用一些辅助数据结构,如全局哈希 table 作为注册表?
获取 HTML 文档后,它会被传递给 HTML 解析器,后者将遍历文档并创建内容树。
这个内容树实际上是一个全局散列table,被许多本机函数使用。
此信息适用于Firefox
您要求的所有信息都在您提供的链接中:
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.
作为 ID 应该唯一 - 没有顺序问题
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.
querySelectorAll
在此处有详细记录:
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.
另一方面,getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
没有相同的保证。
事实上,我 运行 在某些较旧的浏览器上遇到了麻烦 -- 在各种浏览器上以破坏的方式返回了一些东西。不过,这可以追溯到 IE6,并且可以在 HTML5 文档类型下稳定下来。
如果你必须,100%,确保文档顺序,总是有旧的 walkTheDom 代码。
Recursion down DOM tree