上一小節(jié)提到了querySelectorAll提供一個上下文范圍，但是瀏覽器無視了這個上下文，默認還是類似document的處理。

那么針對這種情況如何兼容？

Andrew Dupont提出了一個解決方案，原理很簡單：

context.querySelector
在上下文調(diào)用的context元素上指定一個id，通過這個限制范圍，這個方法用的非常廣泛。

我們看來自jQuery2.1.1的代碼：

先看看jQuery最終的實現(xiàn)context.querySelectorAll用的上下文調(diào)用：

$('#test2').click(function() {
 //代碼右圖
}

代碼可見newContext可能是document || 提供的一個上下文。

如： var context = document.querySelector('.aaron'); 此時的上下文即是<div class= "aaron">節(jié)點。

context.querySelectorAll('.aaron span') 在文檔內(nèi)找全部符合選擇器描述的節(jié)點不包括Element本身。

最關(guān)鍵的地方其實就是通過給<div class= "aaron">加一個id用來限制范圍，所以處理就變成了：

<div class= "aaron" id="[id='sizzle-1405486760710']">
context.querySelectorAll('[id='sizzle-1405486760710'] .aaron span')

注意finally總是執(zhí)行context.removeAttribute("id")，意味著我們在之前的處理強制加了一個id，反推hack的手法，selectors前面指定上下文的的id，限制匹配的范圍。

所以整個處理方式，我們可以總結(jié)幾點：

1. 關(guān)鍵是給context設(shè)置一個id，所以上下文content，就會存在這個id限制范圍。

2. 拼接出查詢的選擇器，附上這個ID前綴

newSelector: "[id='sizzle-1405486760710'] div[class='text']"

3. 查詢

newContext.querySelectorAll( newSelector )

4. 因為強制加了ID，所以需要刪除

context.removeAttribute("id");

這樣就達到目的范圍限制context.querySelectorAll了。

querySelectorAll在選擇器上存在的問題，具體我是看jQuery的源碼相關(guān)處理，基本都是IE8上的問題。jQuery對兼容的判斷，都是采用的功能判斷直接特性檢測，偽造一個真實的環(huán)境測試支持度，針對querySelectorAll選取存在的問題之后分析。