querySelector 跟 querySelectorAll 方法浏览器实现无误，避免将其与 JQuery 的选择器混淆

querySelector 和 querySelectorAll 方法浏览器实现无误，避免将其与 JQuery 的选择器混淆
规范定义

querySelector 和 querySelectorAll 方法是 W3C Selectors API Level 1 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在规范中定义了如下接口：

JAVASCRIPT CODE:var foo= document.getElementById("foo");foo.querySelectorAll("html body div > p");// 返回 [<p class="warning">This is a sample warning</p>,<p >This is a sample error</p>]

这次的例子是在 <div id="foo"> 节点下寻找 html 标签中的body 标签中的 div 标签的直接子标签 P。

他的返回结果依然是 [<p class="warning">This is a sample warning</p>,<p >This is a sample error</p>]

这与规范说明一致。

这么说，浏览器本身实现并没有问题，而是JQuery有问题了？其实这也并不尽然，JQuery 本身并没有宣布遵守 W3C Selectors API Level 1 规范实现查找结果，他的选择器 API 实现是私有的。

对于 Element 下的选择器范围，JQuery 认为是从当前元素开始查找，返回符合的结果集。而规范恰恰指出的是选择器只针对当前文档，选择出的结果集再与当前元素的子树比较。

正是由于以上的不同导致了他们返回结果不一致。
建议

切记不要在实际使用中混淆 W3C Selectors API Level 1 规范中选择器的实现机理和 JQuery 中选择器实现机理，它们是不同的。
测试环境
操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE8
IE9
Firefox 4.0.1
Chrome 12.0.742.100
Safari 5.0.5
Opera 11.11
测试页面:
本文更新时间: 2011-09-26

查看更多 下一篇