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

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;
};
[html]
从接口定义可以看到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的实现有错误，如下

[code]
<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>

function $(id){return document.getElementById(id);}
var d1 = $(d1);
var obj1 = d1.querySelector(div a);
var obj2 = d1.querySelectorAll(div a);
var old = d1.id, id = d1.id = "__sizzle__";
try {
var query = # + id + div a;
alert(d1.querySelector( query ));
alert(d1.querySelectorAll( query ).length);
} catch(e) {
} finally {
old ? d1.id = old : d1.removeAttribute( "id" );
}