HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個方法用來更友善地從DOM選取元素，功能類似于jQuery的選擇器。這使得在編寫原生JavaScript代碼時友善了許多。
兩個方法使用差不多的文法，都是接收一個字元串參數，這個參數需要是合法的CSS選擇文法。
其中參數selectors 可以包含多個CSS選擇器，用逗号隔開。
使用這兩個方法無法查找帶僞類狀态的元素，比如querySelector(':hover')不會得到預期結果。
該方法傳回滿足條件的單個元素。按照深度優先和先序周遊的原則使用參數提供的CSS選擇器在DOM進行查找，傳回第一個滿足條件的元素。
該方法傳回所有滿足條件的元素，結果是個nodeList集合。查找規則與前面所述一樣。
通過上面的例子就很好地了解了什麼是會實時更新的元素。document.getElementById傳回的便是實時結果，上面對其添加一個子元素後，再次擷取所有子元素個數，已經由原來的2個更新為3個(這裡不考慮有些浏覽器比如Chrome會把空白也解析為一個子節點)。
我們知道反斜杠是用來轉義用的，比如在字元串裡我們想表示空字元就使用'\b'，換行'\n'。同樣，在提供給querySelector和querySelectorAll的參數也支援轉義，了解這點非常重要。
先看個例子，比如我們有個div它的樣式類為'foo:bar'，當然我知道你一般不會這樣寫。當我們需要選擇它的時候，就需要将其中的冒号進行轉義，否則抛錯。
浏覽器報怨表示不是一個合法的選擇語句。
同時，有趣的事情來了，或許你以為将冒号直接轉義就解決問題了。
同樣，也表示非法。原因就在于反斜杠在字元串中本身就表示轉義的意思，它于冒号結合轉不出東西來，于是抛錯。
是以正确的做法是将反斜杠轉義後'.foo\\:bar'再傳遞給querySelector，後者在接收到'.foo\\:bar'這個參數後，字元串将兩個反斜杠轉義成一個，然後querySelector前面得到的一個反斜杠與冒号結合進行轉義得到正确結果。
也就是說經曆兩次轉義，一次是字元串當中，一次是querySelector解析參數時。
了解這點後，可以來看一個更有趣的例子了。比如我們要選擇類名裡面含反斜杠的元素。是的，我們需要一共使用四個反斜杠！才能正常工作。
4.0+
3.5+
8+
10.0+
3.1+
本文主要參考了MDN上的文檔
<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll">document.querySelectorAll</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll">document.querySelector</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList">NodeList</a>