各瀏覽器中querySelector和querySelectorAll的實現差異分析

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