作者：W3C 发布的选择器 API建议是一个相对较新的尝试，它使 JavaScript 开发人员能够使用 CSS 选择器查找页面上的 DOM 元素。这个单一的 API 简化了遍历和从 DOM 中选择元素的复杂过程，并将其统一在一个简单的统一接口下。
在所有最近来自标准流程的工作中，这是所有浏览器中支持度最好的一项工作之一：今天可以在 Internet Explorer 8、Chrome 和 Safari 中使用，并且即将在 Firefox 3.5 和 Opera 10 中推出。
使用 querySelectorAll
选择器 API 在所有 DOM 文档、元素和片段上提供了两种方法：querySelector 和 querySelectorAll。这两种方法的工作方式几乎完全相同，它们都接受一个 CSS 选择器并返回结果 DOM 元素（唯一的区别是 querySelector 只返回第一个元素）。
例如，给定以下 HTML 代码片段
First paragraph.
Second paragraph.
我们可以使用 querySelectorAll 将 ID 为“id”的 div 内的所有段落的背景颜色设置为红色。
var p = document.querySelectorAll("#id p");
for ( var i = 0; i < p.length; i++ ) {
p[i].style.backgroundColor = "red";
}
或者我们可以找到具有“class”类的 div 的第一个子段落，并为其添加“first”类名。
document.querySelector("div.class > p:first-child")
.className = "first";
通常，这些类型的遍历在长格式的 JavaScript/DOM 代码中会非常繁琐，需要占用多行和多个查询。
虽然选择器 API 方法的实际使用相对简单（每个方法只接受一个参数），但选择使用哪些 CSS 选择器才是具有挑战性的部分。选择器 API 利用浏览器提供的原生 CSS 选择器，用于使用 CSS 对元素进行样式设置。对于大多数浏览器（Firefox、Safari、Chrome 和 Opera）来说，这意味着您可以使用完整的CSS 3 选择器。Internet Explorer 8 提供了一个更有限的子集，涵盖了CSS 2 选择器（这些选择器仍然非常有用）。
对于大多数选择器 API 的新用户来说，最大的障碍是确定哪些 CSS 选择器适合选择所需的元素，尤其是在大多数编写跨浏览器代码的开发人员只对有限的、完全有效的 CSS 1 选择器子集有丰富的经验的情况下。
虽然CSS 2和CSS 3 选择器规范可以作为学习更多可用内容的良好起点，但也存在许多有用的指南供您学习更多。
- CSS 3 选择器详解
- XML.com：CSS 3 选择器
- jQuery 选择器参考（注意：还包括自定义的非标准选择器。）
实际应用
选择器 API 最引人注目的用例不是 Web 开发人员直接使用它，而是由已经提供 DOM CSS 选择器功能的第三方库使用它。今天采用选择器 API 的最棘手的问题是它并非在所有用户开发的浏览器中都可用（包括 IE 6、IE 7 和 Firefox 3）。因此，在这些浏览器不再使用之前，我们必须使用一些中间实用程序来重新创建完整的 DOM CSS 选择器体验。
值得庆幸的是，已经存在许多库提供了与选择器 API 兼容的 API（事实上，选择器 API 的许多灵感都来自这些库的存在）。此外，许多这些实现已经在幕后使用了选择器 API。这意味着您可以在所有支持的浏览器中使用 DOM CSS 选择器，并且无需任何操作即可从原生选择器 API 实现获得更快的性能。
一些优雅地使用新的选择器 API 的现有实现是
必须强调的是，使用这个新 API（与必须使用的传统 DOM 和 JavaScript 组合相比）将获得巨大的性能提升。当您查看 JavaScript 库开始实现新的选择器 API 时发生的改进时，您确实可以看到差异。
当之前运行一些测试时，结果如下：
您可以看到库开始使用原生选择器 API 实现后发生的巨大性能提升，您的应用程序也极有可能发生这种性能提升。
测试套件
为了配合选择器 API 规范的定义，Mozilla 的 John Resig 创建了一个选择器 API 测试套件。这个测试套件可用于确定主要浏览器中各个选择器 API 实现的质量。
支持该 API 的浏览器的当前结果是
- Firefox 3.5：99.3%
- Safari 4：99.3%
- Chrome 2：99.3%
- Opera 10b1：97.5%
- Internet Explorer 8：47.4%
如前所述，Internet Explorer 8 缺少大多数 CSS 3 选择器，因此无法通过大多数相关测试。
就目前而言，选择器 API 应该作为一种简单且快速的方式来选择页面上的 DOM 元素。它已经使那些使用提供类似功能的 JavaScript 库的用户受益，因此请随时深入研究并试用该 API。
18 条评论