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>

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