Javascript教程:querySelector()方法，

Javascript教程:querySelector()方法，

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都實現了NodeSelector介面。即這三種類型的元素都擁有者兩個方法。querySelector和querySelectorAll的參數須是符合css selector的字串。不同的是querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)。精心開發5年的UI前端架構！

目前 IE8/9及Firefox/Chrome/Safari/Opera的最新版已經支援它們。

 

 

　querySelector()方法接受一個CSS查詢並返回匹配模式的第一個子孫元素，如果沒有匹配的元素則返回null。請看下面的例子：

//擷取body元素   varbody=document.querySelector("body");   //擷取ID為myDiv的元素   varmyDiv=document.querySelecotr("#myDiv");   //擷取第一個包含類selected的元素   varselected=document.querySelector(".selected");   //擷取第一個包含類button的映像元素

 

　　
　　varimg=document.body.querySelector("img.button");當querySelector()方法應用Document類型上時，它會嘗試從文件項目開始匹配模式。如果應用與Element類型，查詢則只會嘗試從該元素的子孫節點中尋找匹配。
　　
　　CSS查詢可以根據需要複雜化或簡單化。如果查詢中有語法錯誤或者有不支援選取器，那麼querySelector()或拋出一個錯誤。 精心開發5年的UI前端架構！   
　　
　　querySelector()方法還接受可選的第二個參數，它是一個命名空間解析器，就是一個接受一個命名空間首碼並返回其相關URI的函數，類似於：

varnsresolver=function(prefix){   switch(prefix){   case"w3cmm":   return"http://www.w3cmm.com";   //此處其它代碼   }   }；

 

　　
命名空間解析器對於在嵌入了其它語言諸如SVG或MathML的XHTML文檔中執行查詢非常有用，XML文檔亦如此。CSS查詢中的命名空間是使用一個管道來指定的，如下：

varsvgImage=document.querySelector("svg|svg",function(prefix){   switch(prefix){   case:"svg":   return"http://www.w3.rog/2000/svg";   }   });

 

　　
這個例子通過在文檔中尋找定義為<svg:svg>的元素返回了第一個SVG映像。當在查詢中遇到了svg命名空間首碼時，則調用命名空間解析器函數來確定URI。沒有命名空間解析器，則會拋出一個錯誤，因為查詢引擎無法辨識svg命名空間首碼。
　　 精心開發5年的UI前端架構！   
各瀏覽器中querySelector和querySelectorAll的實現差異

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

但Element.querySelector和Element.querySelectorAll的實現有錯誤，如下

<div id="d1">     <p><a href=http://www.jcodecraeer.com>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.jcodecraeer.com     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行）。簡化下 精心開發5年的UI前端架構！  

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__"。

 

JavaScript裡的documentquerySelectorAll()是什？

document.querySelectorAll() 是 HTML5中引入的新方法，它的使用方式與jQuery的選取器相同。
例如：
document.querySelectorAll("div");
document.querySelectorAll(".comment");
document.querySelectorAll("#userid");

由於它是HTML5原生的方法，所以不需要添加jQuery引用。
 
推薦學習 javascript 最好的書籍或教程

JavaScript權威指南（第四版）算是JavaScript最好的書了。

《JavaScript權威指南》全面介紹了JavaScript語言的核心，以及Web瀏覽器中實現的遺留和標準的DOM。它運用了一些複雜的例子，說明如何處理驗證表單資料、使用cookie、建立可移植的DHTML動畫等常見任務。本書還包括詳細的參考手冊，涵蓋了JavaScript的核心API、遺留的用戶端API和W3C標準DOM API，記述了這些API中的每一個JavaScript對象、方法、性質、建構函式、常量和事件處理常式。

網店價格(68.8元起...第一步分講得很清晰 很好 後面的參考手冊編排比較糟糕 尤其是第三、四、五部分 想快速查詢的東西真難