querySelector和querySelectorAll是W3C提供的新的查詢接口

querySelector和querySelectorAll是W3C提供的 新的查詢接口，其主要特點如下：

1、querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
2、querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節(jié)點數(shù)組)。
3、返回的結(jié)果是靜態(tài)的，之后對document結(jié)構(gòu)的改變不會影響到之前取到的結(jié)果。

這兩個方法都可以接受三種類型的參數(shù)：id(#)，class(.)，標(biāo)簽，很像jquery的選擇器。

var obj = document.querySelector("#id");var obj = document.querySelector(".classname");
var obj = document.querySelector("div");

var el = document.body.querySelector("style[type='text/css'], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");

目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）
瀏覽器支持查看

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;
};

從接口定義可以看到Document、DocumentFragment、Element都實現(xiàn)了NodeSelector接口。即這三種類型的元素都擁有者兩個方法。querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)。

目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已經(jīng)支持它們。

如想獲取頁面class屬性為"red"的元素，除了使用document.getElementsByClassName('red')還可以使用document.querySelector('.red')和document.querySelectorAll('.red')。

但Element.querySelector和Element.querySelectorAll的實現(xiàn)有錯誤，如下

<div id="d1"> 
<p><a >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的定義卻是不合的，根據(jù)定義應(yīng)該是在元素d1范圍內(nèi)查找"div a"，而d1內(nèi)壓根沒有div。因此應(yīng)該分別返回null，空集合。

jQuery1.4.2 及之前版本中只使用了document.querySelectorAll，沒有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll，但做了修復(fù)。在選擇器前加了"#__sizzle__"以強(qiáng)制其在指定元素內(nèi)查找（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" ); 
} 

實現(xiàn)很巧妙，指定范圍的元素如果有id，將其保留在old，"__sizzle__"賦值其作為臨時id，在選擇器"div a"前指定查找范圍為"#__sizzle__"，即d1。finally語句來最后清理，如果指定范圍的元素本身有id將其恢復(fù)為old，沒有則去掉臨時的id屬性"__sizzle__"。

相關(guān)：
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

最新評論