摘要：而事實上，它會在的子代元素中匹配查詢條件。它們并不會相對于任何特定的元素，甚至不會相對于調用的元素。偽選擇器是相對當前作用域進行匹配的。它們是和的替代方法，存在父節點上。了解像這些坑很重要，因為從它們的行為中很難了解它們的實質特性。

原文鏈接地址：http://blog.lxjwlt.com/front-...
筆者整理筆記：

先看看MDN上怎么介紹這個API的：
概述
返回當前文檔中匹配一個特定選擇器的所有的元素(使用深度優先，前序遍歷規則這樣的規則遍歷所有文檔節點) .返回的對象類型是 NodeList.

語法

elementList = document.querySelectorAll(selectors);

elementList 是一個non-live的 NodeList 類型的對象.
selectors 是一個由逗號連接的包含一個或多個CSS選擇器的字符串.
如果 selectors參數中包含 CSS偽類 ,則返回一個空的elementList.

例子
下面的例子返回一個文檔中所有的class為"note"或者 "alert"的div元素.

var matches = document.querySelectorAll("div.note, div.alert");

注意
如果指定的選擇器不合法,則拋出一個SYNTAX_ERR 異常.
querySelectorAll()從WebApps API中引入.

WebKit 內核的瀏覽器有一個bug: 如果 selectors參數中包含 CSS偽類 ,返回的elementList包含一個 元素,而不是空的.

現代瀏覽器提供了querySelector和querySelectorAll這兩API。它們用來查詢匹配CSS選擇器的單個或多個元素。這類似CSS選擇器：用class或ID選取元素。如果你沒有用過它們，MDN上有非常棒的介紹。
想象下面的HTML頁面：

（1） document.querySelectorAll("div")返回頁面中所有div元素組成的節點列表（NodeList類型的對象），而document.querySelector("div.lonely")返回一個多帶帶的div元素。

（2）document元素支持querySelector和querySelectorAll，你可以在整個頁面文檔中查找元素。元素本身也支持querySelector和querySelectorAll，你可以查找該元素的子代元素。例如，下面的表達式會查找#my-id下的圖片子代元素（注意是子代而不是后代）：

document.querySelector("#my-id").querySelectorAll("img")

在上述html頁面例子中，這個表達式將查詢到 而不會匹配

好好想想，下面這兩個表達式做了什么？

document.querySelectorAll("#my-id div div");
document.querySelector("#my-id").querySelectorAll("div div");

你可能想當然地認為它們是等價的。畢竟，第一個是查詢一個被#my-div下div包裹的div元素，而另一個是查詢一個被div包裹的div元素，而這個div是#my-id的子代元素。然而，它們返回了非常不一樣的結果：

document.querySelectorAll("#my-id div div").length === 1;
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

這里到底是怎么回事？
這是因為，element.querySelectorAll不是從element開始匹配元素的。而事實上，它會在element的子代元素中匹配查詢條件。因此，我們找到了三個div元素： div.lonely，div.outer，div.inner。我們找它們是因為它們都匹配div div選擇符，而且它們都是#my-id的子代元素。
我們要記住，querySelector/querySelectorAll下的CSS選擇器是絕對的。它們并不會相對于任何特定的元素，甚至不會相對于調用querySelectorAll的元素。
這甚至對調用querySelectorAll的元素的外部元素生效。例如，這個選擇器：

document.querySelector("#my-id").querySelector("div div div")

...在這個代碼段（JSbin）中匹配div.inner：

這個API讓我覺得很意外，我所問過的前端工程師也同意我的觀點。然而，這個并不是一個bug。這就是規范定義它的工作方式，而瀏覽器也一致地按這種方式實現了它。John Resig 評論道，當這個規范出來的時候，他和其他人都感到這個API的行為相當的詭異。
如果你無法輕易地將選擇器重寫為“絕對的”形式，這里有兩個選擇：:scopeCSS偽選擇器和query/queryAll。
:scope偽選擇器是相對當前作用域進行匹配的。這名字來自CSS的作用域標識符，它能夠限定樣式在文檔中的范圍。
document.querySelector("#my-id").querySelectorAll(":scope div div");
不幸的是，支持作用域CSS和:scope偽選擇器的瀏覽器非常少。只有最新的火狐瀏覽器默認支持它。

Chrome和Opera需要隱藏的很深的實驗功能來開啟它。Safari的實現則漏洞白出。而IE干脆沒有實現。
另一個選擇是element.query/queryAll。它們是querySelector和querySelectorAll的替代方法，存在DOM父節點上。它們也接受選擇器，但這些選擇器的解析是相對于調用這些方法的元素。不幸的是，這些方法更加模糊不清：MDN或caniuse.com里都沒有提及它們，并且2015年6月18日的DOM4草案中也不見蹤影。他們仍然存在于一個較舊的版本中，于2014年二月4日，也出現在WHATWG 現存文檔中。他們已經被至少兩個擴展兼容庫實現：
? Dom4
? dom-elements
總的來說，DOM規范不是總是清晰明了的。了解像這些坑很重要，因為從它們的行為中很難了解它們的實質特性。幸運的是，你可以重寫你的選擇器，所以沒什么關系。如果你無法重寫選擇器，這里會有一些實現庫為你提供你要的現代API。另外，類似jQuery的庫會為你提供一套穩定的友好的接口來查找DOM元素。