queryselector和queryselectorall是w3c提供的新的查询接口
复制代码 代码如下:
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]
sina
在支持这两个方法的浏览器可以看到分别弹出了“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行）。简化下
复制代码 代码如下:
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 );
}
实现很巧妙，指定范围的元素如果有id，将其保留在old，__sizzle__赋值其作为临时id，在选择器div a前指定查找范围为#__sizzle__，即d1。finally语句来最后清理，如果指定范围的元素本身有id将其恢复为old，没有则去掉临时的id属性__sizzle__。
相关：
http://msdn.microsoft.com/en-us/library/cc288169%28v=vs.85%29.aspx
http://msdn.microsoft.com/en-us/library/cc304115%28vs.85%29.aspx
https://developer.mozilla.org/en/dom/document.queryselector
https://developer.mozilla.org/en/dom/document.queryselectorall
https://developer.mozilla.org/en/dom/element.queryselector
https://developer.mozilla.org/en/dom/element.queryselectorall