摘要：而事實(shí)上，它會(huì)在的子代元素中匹配查詢條件。它們并不會(huì)相對(duì)于任何特定的元素，甚至不會(huì)相對(duì)于調(diào)用的元素。偽選擇器是相對(duì)當(dāng)前作用域進(jìn)行匹配的。它們是和的替代方法，存在父節(jié)點(diǎn)上。了解像這些坑很重要，因?yàn)閺乃鼈兊男袨橹泻茈y了解它們的實(shí)質(zhì)特性。

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

先看看MDN上怎么介紹這個(gè)API的：
概述
返回當(dāng)前文檔中匹配一個(gè)特定選擇器的所有的元素(使用深度優(yōu)先，前序遍歷規(guī)則這樣的規(guī)則遍歷所有文檔節(jié)點(diǎn)) .返回的對(duì)象類型是 NodeList.

語法

elementList = document.querySelectorAll(selectors);

elementList 是一個(gè)non-live的 NodeList 類型的對(duì)象.
selectors 是一個(gè)由逗號(hào)連接的包含一個(gè)或多個(gè)CSS選擇器的字符串.
如果 selectors參數(shù)中包含 CSS偽類 ,則返回一個(gè)空的elementList.

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

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

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

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

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

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

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

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

在上述html頁面例子中，這個(gè)表達(dá)式將查詢到 而不會(huì)匹配

好好想想，下面這兩個(gè)表達(dá)式做了什么？

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

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

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

這里到底是怎么回事？
這是因?yàn)?，element.querySelectorAll不是從element開始匹配元素的。而事實(shí)上，它會(huì)在element的子代元素中匹配查詢條件。因此，我們找到了三個(gè)div元素： div.lonely，div.outer，div.inner。我們找它們是因?yàn)樗鼈兌计ヅ鋎iv div選擇符，而且它們都是#my-id的子代元素。
我們要記住，querySelector/querySelectorAll下的CSS選擇器是絕對(duì)的。它們并不會(huì)相對(duì)于任何特定的元素，甚至不會(huì)相對(duì)于調(diào)用querySelectorAll的元素。
這甚至對(duì)調(diào)用querySelectorAll的元素的外部元素生效。例如，這個(gè)選擇器：

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

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

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

Chrome和Opera需要隱藏的很深的實(shí)驗(yàn)功能來開啟它。Safari的實(shí)現(xiàn)則漏洞白出。而IE干脆沒有實(shí)現(xiàn)。
另一個(gè)選擇是element.query/queryAll。它們是querySelector和querySelectorAll的替代方法，存在DOM父節(jié)點(diǎn)上。它們也接受選擇器，但這些選擇器的解析是相對(duì)于調(diào)用這些方法的元素。不幸的是，這些方法更加模糊不清：MDN或caniuse.com里都沒有提及它們，并且2015年6月18日的DOM4草案中也不見蹤影。他們?nèi)匀淮嬖谟谝粋€(gè)較舊的版本中，于2014年二月4日，也出現(xiàn)在WHATWG 現(xiàn)存文檔中。他們已經(jīng)被至少兩個(gè)擴(kuò)展兼容庫實(shí)現(xiàn)：
? Dom4
? dom-elements
總的來說，DOM規(guī)范不是總是清晰明了的。了解像這些坑很重要，因?yàn)閺乃鼈兊男袨橹泻茈y了解它們的實(shí)質(zhì)特性。幸運(yùn)的是，你可以重寫你的選擇器，所以沒什么關(guān)系。如果你無法重寫選擇器，這里會(huì)有一些實(shí)現(xiàn)庫為你提供你要的現(xiàn)代API。另外，類似jQuery的庫會(huì)為你提供一套穩(wěn)定的友好的接口來查找DOM元素。