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]
<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行）。簡化下
. 代碼如下:
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