本文記錄，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：
- 首先 querySelector 比 jQuery 要快！因為 querySelector 是內建方法！
- 使用 querySelector，無需要掛在 jQuery 的檔案，減少 overhead！
- jQuery 有各種 filter (例如：":input")！ 而 querySelector，沒有 jQuery 這種 filter！
- 所以 querySelector 無法使用任何 (":input" 類的) filter！
- 最終 querySelector 還是首選！
其他 querySelector 可使用的 CSS 選擇器：
還有很多沒介紹的，querySelector 可使用的 CSS 選擇器；例如：偽選擇器（Pseudo）；通用選擇器（Universal selector）；一般兄弟組合器 "~" (General sibling combinator)；緊鄰兄弟組合器 "+" (Adjacent sibling combinator)。詳情可參見 reference 中的，第4個，和第5個，link，裡面有詳細的 CSS 選擇器的介紹
個人評價：
document.querySelectorAll() 的 "遞進式" 選取，很好用；
- 去掉了 "傳統 DOM選擇器" 中，nest selector 的麻煩
- 程式碼更簡潔了
- 返回的是 nodeList
- 可進一步使用 nodeList.forEach()
而且，可以看出，當 css selectors 組合起來的時候，那種靈巧多變，是多麼的強大啊！
任何一個 element 都逃不過，組合的選擇中。除非這個 element 不在 html 中！