JavaScript の querySelector 使用說明

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

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

為什麼要學習 querySelector：

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

那麼 querySelector 是什麼：

document.querySelector() 用於選取 html 中的節點（node | element）；相較於傳統的 DOM 選擇器 (DOM selectors)，其特點是，可以使用 CSS 風格的 Selectors；並且幾乎支持所有CSS選擇器的 syntax 風格；

常用方法，語法對比：

常用的 get 某個節點的方法，無外乎三種，通過 class，tag，id；傳統的 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)：

選取條件，可以是一個或者多個；多個的情況，並不限制個數，可以是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標簽
document.querySelectorAll("img[id='large'][class='bg']");
document.querySelector("img[id='large'][class='bg']");

// "多個" 選取條件, 用逗號隔開 (相當於 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 標簽，下麵的，全部兄弟們！
document.querySelectorAll(".class_x li.big_pic ~ li ");

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

對比 querySelector 和 jQuery：

1. 首先 querySelector 比 jQuery 要快！因為 querySelector 是內置方法！
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. 去掉了 "傳統 DOM選擇器" 中，nest selector 的麻煩
2. 代碼更簡潔了
3. 返回的是 nodeList
4. 可進一步使用 nodeList.forEach()

而且，可以看出，當 css selectors 組合起來的時候，那種靈巧多變，是多麼的強大啊！
任何一個 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