DOM 的选择器 API

在刚开始的时候，我们只能用 getElementById，getElementsByClassName，getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素。后来，在 W3C 的选择器 API 标准中[1]，提供了 querySelector 和 querySelectorAll 这两个利用 CSS 选择器查找元素的方法。它们的语法如下：

element = document.querySelector(selectors);
elementList = document.querySelectorAll(selectors);

其中，document.querySelector 用于查找第一个符合 CSS 选择器条件的元素，使用深度优先，前序遍历的方法。而 document.querySlectorAll 用于查找所有符合 CSS 选择器条件的元素，返回一个静态的 NodeList 对象。注意不同的是， getElementsByClassName 和 getElementsByTagName 返回的却是一个动态的 HTMLCollection 或 NodeList 对象。也许是这个原因，选择同样的元素时，querySelector 比 getElementsByClassName 和 getElementsByTagName 要慢不少。

类似地，querySelector 和 querySelectorAll 这两个方法也可用于在某元素内部查找符合某选择器条件的子元素。此时的语法相同：

element = baseElement.querySelector(selectors);
elementList = baseElement.querySelectorAll(selectors);

这个 querySelectorAll 方法用于元素时，和 jQuery 的 $baseElement.find(selectors) 是有不同的。前者是在 document 中查找，然后过滤包含于 baseElement 的元素；而后者是直接在 baseElement 中查找元素。

这个选择器 API 标准，Firefox 3.5+，Safari 3.2+，Opera 10+，Chrome 1.0+ 都支持。而 IE 直到 8.0 版本才支持，但由于 IE 8 对大部分 CSS3 选择器都不支持，这个选择器 API 在 IE 8 中的用处就大打折扣了。到了 IE 9 才算基本完整的支持 CSS3 选择器了。

另外，选择器 API 中还有个 matchesSelector 方法，用于检测某个元素是否满足某个选择器。目前，各个主流浏览器对这个方法的支持都需要加上前缀，而且这个方法在最新的标准中已经改名为 matches 了。

参考资料：
[1] W3C - Selectors API Level 1
[2] W3C - Selectors API Level 2
[3] Document.querySelectorAll - Web API reference | MDN[4] document.querySelector - Web API reference | MDN[5] querySelectorAll method (Windows) - MSDN
[6] querySelector method (Windows) - MSDN
[7] Understanding CSS Selectors (Internet Explorer) - MSDN
[8] querySelectorAll vs getElementsByTagName · jsPerf[9] Why is getElementsByTagName() faster than querySelectorAll()?
[A] Live vs. Static Node Lists  | Darcy Clarke
[B] Selectors API Test Suite - John Resig
[C] 各浏览器中querySelector和querySelectorAll的实现差异 - snandy[D] 避免将 querySelectorAll 方法与 JQuery 的选择器混淆 - w3ctech
[E] Element.mozMatchesSelector - Web API reference | MDN
[F] Can I use matches() DOM method