各浏览器中querySelector和querySelectorAll的实现差异分析

querySelector和querySelectorAll是W3C提供的新的查询接口

querySelector和querySelectorAll是W3C提供的新的查询接口，其主要特点如下：

1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。

2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。

这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。

var obj = document.querySelector("#id");var obj = document.querySelector(".classname"); var obj = document.querySelector("div");

var el = document.body.querySelector("style[type='text/css'], style:not([type])"); var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)"); var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");

目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）

浏览器支持查看

module dom {

[Supplemental, NoInterfaceObject]

interface NodeSelector {

Element querySelector(in DOMString selectors);

NodeList querySelectorAll(in DOMString selectors);

};

Document implements NodeSelector;

DocumentFragment implements NodeSelector;

Element implements NodeSelector;

};

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)

Basic support

3.5 (1.9.1)

WebKit bug 16587

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile

Basic support

2.1

yes

10.0

3.2

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。

如想获取页面class属性为"red"的元素，除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。

但Element.querySelector和Element.querySelectorAll的实现有错误，如下

<div id="d1"> <p><a href="http://www.sina.com.cn">SINA</a></p> </div> <script type="text/javascript"> function $(id){return document.getElementById(id);} var d1 = $('d1'); var obj1 = d1.querySelector('div a'); var obj2 = d1.querySelectorAll('div a'); alert(obj1); // -> http://www.sina.com.cn/ alert(obj2.length); // -> 1 </script>

如果支持这两个方法的浏览器可以看到分别弹出了“http://www.sina.com.cn/”，和 “1”。说明查询到了想要的元素或元素集合。这与W3C的定义却是不合的，根据定义应该是在元素d1范围内查找"div a"，而d1内压根没有div。因此应该分别返回null，空集合。

jQuery1.4.2 及之前版本中只使用了document.querySelectorAll，没有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll，但做了修复。在选择器前加了"#__sizzle__"以强制其在指定元素内查找（3903-3918行）。简化下

实现很巧妙，指定范围的元素如果有id，将其保留在old，"__sizzle__"赋值其作为临时id，在选择器"div a"前指定查找范围为"#__sizzle__"，即d1。finally语句来最后清理，如果指定范围的元素本身有id将其恢复为old，没有则去掉临时的id属性"__sizzle__"。