谋智社区

原文地址：DOM selectors API in Firefox 3.5
系列地址：颠覆网络35天

译注：本文作者为JQuery作者John Resig，:)

====================================

W3C发布的推荐选取器API为JavaScript开发人员提供了一种全新的能够通过CSS选取器来获取DOM（文档对象模型）对象的能力。该API包括了很复杂的在DOM中遍历/选取元素的过程，但是提供给开发人员使用的接口却非常的简单和统一。

通过标准化的工作进行，目前这个特性已经能够很好的在现代浏览器中得到支持：IE8、Chrome和Safari的最新版本都支持，马上要发布的Firefox 3.5和Opera 10也都会包括实现。

使用querySelectorAll

选取器API为所有的DOM文档、元素和片段提供了两个方法：querySelector 和 querySelectorAll。两个方法的做得事情差不多一样，都是接受CSS选取器作为参数，然后返回DOM元素对象（不过querySelector仅仅返回第一个元素，而querySelectorAll返回所有元素集合）。

例如，参考下面一段HTML代码：

<div id=“id” class=“class”>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
</div>

我们现在希望使用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的第一个子段落，然后把这个段落赋予‘class’类属性。

document.querySelector(“div.class > p:first-child”)
        .className = “first”;

通常来说，这类DOM对象的遍历是非常乏味的大段的JavaScript/DOM代码，需要一级一级的查询和遍历。

实际使用选取器API的方法是非常简单的（仅需要一个简单参数指定），稍微有些挑战的地方在于选择使用什么样的CSS选取规则。选取器API会调用 到由浏览器提供的本地CSS选取器方法。对于大部分浏览器来说（Firefox、Safari、Chrome和Opera），这意味着提供对所有CSS 3选取器的访问。IE8提供的则是覆盖CSS 2 选取器的一个选取规则子集的有限实现（但是这样都已经很有用了）。

对大部分使用选取器API的新用户来说，最大的障碍就是需要决定使用什么CSS选取规则是合适的──尤其是大部分开发人员为了写跨浏览器的代码而通常仅仅熟悉CSS 1的选取规则。

当然，CSS 2 和 CSS 3 选取器的规范可以作为学习这些规则的很好开端，此外还有很多非常有用的指导信息：

• CSS 3 选取器揭秘
• XML.com: CSS 3 选取器
• jQuery选取器参考（注意：其中包括一些自定义的非规范的选取器。

第三方实现

选取器API很有趣的一个现象是，目前并没有特别多网页开发人员使用，却在大量第三方库里面直接使用API来提供进一步的DOM和CSS选取功能。 不过今天，想要推广使用选取器API一个很棘手的问题是绝大部分用户使用的浏览器还不提供支持（包括IE6、IE7和Firefox 3）。因此，直到用户淘汰这些浏览器之后，我们才有可能获得最终的机会全面的更新或者重新打造DOM CSS选取API。

让人欣慰的是，现在也已经存在第三方的JavaScript库允许提供同选取器API兼容的API（事实上，选取器API规范的形成基本上是攫取自 这些第三方库）。这些第三方库为不支持选取器API的浏览器提供兼容API，而在支持的浏览器上底层实现直接使用选取器API，这样就允许开发人员在所有 浏览器平台上使用这些选取器API，而在原生支持选取器API的浏览器上能获得更好的性能。

一些使用全新选取器API的实现库：

• jQuery
• Prototype
• Dojo
• MooTools

很有必要强调一下通过使用这些API获得的巨大性能提升（同以往传统的DOM和JavaScript调用结合的方式）。

这里有一些性能方面的测试：

您可以看到当这些库使用原生的选取器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%
• IE 8: 47.4%

前面提过，IE 8由于缺少对大部分CSS 3选取器的实现，在很多测试用例上都失败。

选取器API存在的目的就在于提供一种非常简单的快速的在页面中选取DOM元素的方法。他已经为那些使用类似功能JavaScript库的开发人员带来了大幅的性能提升，所以今天就开始尝试吧～