跟随标准与Webkit源码探究DOM -- 获取元素之querySelector，querySelectorAll

最新推荐文章于 2024-11-03 16:40:52 发布

denglaiyou4326

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量115

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/joyeecheung/p/4122959.html

版权

使用CSS选择器获取元素 -- `querySelector`，`querySelectorAll`（HTML5）

标准

W3C Selector API Level 1为Document，DocumentFragment和Element追加了querySelector和querySelctorAll，原型为Element? querySelector(DOMString selectors)和 NodeList querySelectorAll(DOMString selectors)，说明了匹配的算法
W3C Selector API 2又追加了find和findAll，但目前在各大浏览器里暂无实现（这个标准目前还未进入recommendation）。
WHATWG DOM 将querySelector及querySelectorAll定义在了interface ParentNode并声明Document, DocumentFragment及Element均需实现这个interface，原型为Element? querySelector(DOMString selectors)与[NewObject] NodeList querySelectorAll(DOMString selectors)，并定义了scope-match的步骤。注意interface ParentNode还有用于获取相对位置的元素的两个方法query和queryAll，但目前在各大浏览器里暂无实现。
DOM4也新增了interface ParentNode，和WHATWG类似

注意点

标准里强调了querySelectorAll返回的一定是一个static NodeList -- 也就是说如果将它的返回结果保存下来，当文档更新时，保存的NodeList里的元素不会跟着更新。
W3C Selector API Level 1 规定当传入的CSS选择器不合法时，会抛出SYNTAX_ERR异常。Selector API Level 2 和 WHATWG 改为了 SyntaxError。
按照W3C Selector API Level 1的提示，在选择器里使用pseudo-elements（目前只有:after，:before，:first-letter，:first-line，:selection）将不会匹配到任何元素，另外出于保护隐私的考虑，标准也推荐将所有链接视为未访问，即:visited不会匹配到任何元素。
无匹配元素时，querySelector返回null，querySelectorAll返回空的NodeList
有多个匹配元素时，querySelector返回按照document order（先序DFS）遍历到的第一个元素，querySelectorAll返回按照 document order 排序的NodeList

兼容性

IE 9+及其他浏览器的现行版本正常支持包括CSS3的选择器，IE8支持简单的 CSS2 选择器（如：不支持空格表示的后代）

WebKit 代码分析

ContainerNode 就是 WHATWG 里描述的 interface ParentNode，ContainerNode的querySelector和querySelctorAll实际上分别调用SelectorQuery的queryFirst和queryAll（参考WebCore/dom/ContainerNode.cpp），它们又分别调用SelectorDataList的queryFirst和queryAll（注意这里的 queryAll 和标准里定义的不是一个东西。另外 SingleElementExtractorSelectorQueryTrait和AllElementExtractorSelectorQueryTrait这两个使用模版达到类似动态类型的写法挺有趣的），通过execute来对ContainerNode的子节点匹配CSS。execute里就是CSS选择器的代码，里面还有相当一部分 JIT 的优化，这里就不展开分析了。

在queryFirst用于SelectorQueryTrait的 template specialiation 的 SingleElementExtractorSelectorQueryTrait里，shouldOnlyMatchFirstElement设为true，注意execute用于匹配CSS的其他方法基本都会在第一次找到匹配元素的时候检查shouldOnlyMatchFirstElement确定是否立刻保存匹配结果并返回（使用elementDescendants达到先序DFS，elementDescendants最终也是和getElementsByID的实现一样使用到了NodeTraversal），这样就达到了标准里提到的返回先序DFS遇到的第一个匹配元素的要求。而queryAll使用了StaticElementList（StaticNodeList），来为保存匹配元素的Vector（属于WTF）创建一个 static 的快照用于返回（参见WebCore/dom/SelectorQuery.cpp）