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

目前幾乎主流瀏覽器均支持了他們，包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

萬能的sizzle在高版本的瀏覽器中復(fù)雜的選擇器盡量走querySelectorAll，前提是這個(gè)匹配的節(jié)點(diǎn)沒有兼容問題。

從IE8開始雖然支持querySelectorAll的API，但是會(huì)有各式各樣的BUG，所以sizzle拿rbuggyQSA用來記錄這個(gè)BUG問題。

if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {    
    //newContext.querySelectorAll( newSelector )
}

zepto的選擇器則更直接：

zepto.qsa = function(element, selector) {
    return element.querySelectorAll(selector)
}

jQuery的選擇器當(dāng)然都是優(yōu)先選擇querySelectorAll，否則的話就走sizzle的邏輯，當(dāng)然IE6 7是必須的，IE8雖然實(shí)現(xiàn)了querySelectorAll，但是也有一些問題，具體我們后面分析。

關(guān)于querySelectorAll接口定義：

partial interface Document {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};
partial interface DocumentFragment {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};
partial interface Element {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};

從接口定義可以看到Document、DocumentFragment、Element都實(shí)現(xiàn)了NodeSelector接口。即這三種類型的元素都擁有者兩個(gè)方法。

querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。

不同的是querySelector返回的是一個(gè)對(duì)象，querySelectorAll返回的一個(gè)集合(NodeList)。

所以選擇querySelectorAll更符合jQuery這個(gè)合集對(duì)象的習(xí)慣。

document.querySelectorAll 與 element.querySelectorAll區(qū)別？

當(dāng)調(diào)用上下文是document的時(shí)候，沒有什么問題，各瀏覽器的實(shí)現(xiàn)基本一致，如果調(diào)用的上下文是element，dom Node的時(shí)候，瀏覽器的實(shí)現(xiàn)有點(diǎn)不同。

具體就是表現(xiàn)在：

element.querySelectorAll 在文檔內(nèi)找全部符合選擇器描述的節(jié)點(diǎn)包括Element本身

 對(duì)照一組代碼：

//通過一個(gè)上下文查找
var aaRoot = document.getElementById('aaronId');
var element = aaRoot.querySelector('.aaron span');
//直接查找
var elementList = document.querySelectorAll('.aaron span');

問題出在aaRoot.querySelector盡然還有返回值！因?yàn)樯舷挛牟檎业姆秶俗陨砹恕?/p>

選擇上下文是在aaRoot里面，選擇器是.aaron就父節(jié)點(diǎn)，理論是找不到對(duì)應(yīng)的節(jié)點(diǎn)的。

所以邏輯上是不合理的，因?yàn)楦菊也坏?，但是結(jié)果跟document調(diào)用如出一轍，所以此時(shí)node ele類似document了。

可能的查找機(jī)制是這樣的：

首先在document的范圍內(nèi)進(jìn)行查找所有滿足選擇器條件的元素，
在上面這段代碼中，我們的選擇器是.aaron span，就是所有的直接父元素類名為aaron的元素。
然后，再看哪些元素是調(diào)用querySelector/querySelectorAll的元素的子元素，這些元素將會(huì)被返回。
這也就說明了為什么element會(huì)一同返回。