本文記錄，JavaScript 中 querySelector 的使用方法。小白貢獻，語失莫怪。

成都創(chuàng)新互聯(lián)公司是專業(yè)的白朗網(wǎng)站建設(shè)公司，白朗接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行白朗網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

// 兩種 query 的 method (方法)
document.querySelector(selectors);
document.querySelectorAll(selectors);

為什么要學(xué)習(xí) querySelector：

因為 front end 中，JavaScript 的基本邏輯就是： 選取一個 element，然后 do somethong with it；所以，一切的開始，就是要先想辦法，抓到那個 element；而 querySelector 就是眾多選擇器中，特別好用的一個；所以，非常有必要學(xué)習(xí)；熟練的使用它，就等于邁開了前端 JS 編程，的第一大步！

那么 querySelector 是什么：

document.querySelector() 用于選取 html 中的節(jié)點（node | element）；相較于傳統(tǒng)的 DOM 選擇器 (DOM selectors)，其特點是，可以使用 CSS 風(fēng)格的 Selectors；并且?guī)缀踔С炙蠧SS選擇器的 syntax 風(fēng)格；

常用方法，語法對比：

常用的 get 某個節(jié)點的方法，無外乎三種，通過 class，tag，id；傳統(tǒng)的 DOM 選取，與 querySelector() 的 syntax 對比如下：

// select element by class name
document.getElementsByClassName("class_x");
document.querySelectorAll(".class_x");

// select element by tag name
document.getElementsByTagName("img");
document.querySelectorAll("img");

// select element by id name
document.getElementById("id_x");
document.querySelector("#id_x");

使用 "多個" 選取條件，或 "遞進式" 的選取條件 (descendant selector)：

選取條件，可以是一個或者多個；多個的情況，并不限制個數(shù)，可以是2個，3個 ... N個；

// "遞進式" 的選取條件 (descendant selector) (可以夸級) (使用"空格"符號)
document.getElementsByClassName("class_x").getElementsByTagName("img");
document.querySelectorAll(".class_x img");

// "父子遞進式" 選取條件 (不可以夸級, 必須是嚴格的直系父子)
document.querySelectorAll(".parent_class > .child_class > .grandChild_class")

// "父子遞進 + 混合式" 選取條件 (使用 ">" 符號)
// 選取 parent_class 中的 child_class 中的 grandChild_class，中的 img tag
document.querySelectorAll(".parent_class > .child_class > .grandChild_class tag_img")

// "遞進式" 的選取條件，屬性選取 (attribute)
// 選取所有，id屬性='large'的，并且class='bg'的，img標(biāo)簽
document.querySelectorAll("img[id='large'][class='bg']");
document.querySelector("img[id='large'][class='bg']");

// "多個" 選取條件, 用逗號隔開 (相當(dāng)于 A 或 B)
document.querySelectorAll(".class_x， .class_y");
document.querySelectorAll(".class_x， img");
document.querySelectorAll(".class_x， #id_x");

// "單個" 選取條件，返回第一個 match
document.getElementsByClassName("class_x")[0];
document.querySelector(".class_x");

// "多個" 選取條件，返回第一個 match
document.getElementsByClassName("class_x").getElementsByTagName("img")[0];
document.querySelector(".class_x， img");

// 選取類 class_x 中，類名為 big_pic 的 li 標(biāo)簽，下面的，全部兄弟們！
document.querySelectorAll(".class_x li.big_pic ~ li ");

// 選取類 class_x 中，類名為 big_pic 的 li 標(biāo)簽，緊挨著的，下一個兄弟！
document.querySelectorAll(".class_x li.big_pic + li ");

對比 querySelector 和 jQuery：

1. 首先 querySelector 比 jQuery 要快！因為 querySelector 是內(nèi)置方法！
2. 使用 querySelector，無需要掛在 jQuery 的文件，減少 overhead！
3. jQuery 有各種 filter (例如：":input")！ 而 querySelector，沒有 jQuery 這種 filter！
4. 所以 querySelector 無法使用任何 (":input" 類的) filter！
5. 最終 querySelector 還是首選！

其他 querySelector 可使用的 CSS 選擇器：

還有很多沒介紹的，querySelector 可使用的 CSS 選擇器；例如：偽選擇器（Pseudo）；通用選擇器（Universal selector）；一般兄弟組合器 "~" (General sibling combinator)；緊鄰兄弟組合器 "+" (Adjacent sibling combinator)。詳情可參見 reference 中的，第4個，和第5個，link，里面有詳細的 CSS 選擇器的介紹

個人評價：

document.querySelectorAll() 的 "遞進式" 選取，很好用；

1. 去掉了 "傳統(tǒng) DOM選擇器" 中，nest selector 的麻煩
2. 代碼更簡潔了
3. 返回的是 nodeList
4. 可進一步使用 nodeList.forEach()

而且，可以看出，當(dāng) css selectors 組合起來的時候，那種靈巧多變，是多么的強大?。?br> 任何一個 element 都逃不過，組合的選擇中。除非這個 element 不在 html 中！

Reference：

1. Document.querySelector() - Web APIs | MDN
2. Element.querySelectorAll() - Web APIs | MDN
3. Descendant combinator - CSS: Cascading Style Sheets | MDN
4. CSS selectors - CSS: Cascading Style Sheets | MDN
5. CSS 選擇器 - CSS（層疊樣式表） | MDN