querySelector 和 querySelectorAll 方法是 W3C Selectors API 規範中定義的。他們的作用是根據 CSS 選擇器規範，便捷定位文檔中指定元素。 目前幾乎主流瀏覽器均支持了他們。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、O ...
querySelector 和 querySelectorAll 方法是 W3C Selectors API 規範中定義的。他們的作用是根據 CSS 選擇器規範，便捷定位文檔中指定元素。
目前幾乎主流瀏覽器均支持了他們。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在規範中定義瞭如下介面：
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)。
獲取頁面I屬性D為test的元素：
-
1 document.getElementById("test"); 2 document.querySelector("#test"); 3 document.querySelectorAll("#test")[0];
獲取頁面class屬性為”red”的元素:
-
document.getElementsByClassName('red') document.querySelector('.red') document.querySelectorAll('.red')
ps:
但需要註意的是返回的nodeList集合中的元素是非實時（no-live）的，想要區別什麼是實時非實時的返回結果，請看下例：
1 <div id="container"> 2 <div></div> 3 <div></div> 4 </div>
1 //首先選取頁面中id為container的元素 2 container=document.getElementById('#container'); 3 console.log(container.childNodes.length)//結果為2 4 //然後通過代碼為其添加一個子元素 5 container.appendChild(document.createElement('div')); 6 //這個元素不但添加到頁面了，這裡的變數container也自動更新了 7 console.log(container.childNodes.length)//結果為3
通過上面的例子就很好地理解了什麼是會實時更新的元素。document.getElementById返回的便是實時結果，上面對其添加一個子元素後，再次獲取所有子元素個數，已經由原來的2個更新為3個(這裡不考慮有些瀏覽器比如Chrome會把空白也解析為一個子節點)。
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)選擇器的區別：
<divid="test1"><ahref="http://www.hujuntao.com/">設計蜂巢</a></div>
<pid="bar">111</p>
<script>
var d1 = document.getElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(obj1)//<a href="http://www.hujuntao.com/">設計蜂巢</a>
console.log(obj2.length)//1
console.log(obj3)//null
</script>
querySelectorAll 在文檔內找全部符合選擇器描述的節點包括Element本身
jQuery(element).find(selector) 在文檔內找全部符合選擇器描述的節點不包括Element本身
