在傳統的 JavaScript 開發中，查找 DOM 往往是開發人員遇到的第一個頭疼的問題，原生的 JavaScript 所提供的 DOM 選擇方法並不多，僅僅侷限於通過 tag, name, id 等方式來查找，這顯然是遠遠不夠的，如果想要進行更爲精確的選擇不得不使用看起來非常繁瑣的正則表達式，或者使用某個庫。事實上，現在所有的瀏覽器廠商都提供了 querySelector 和 querySelectorAll 這兩個方法的支持，甚至就連微軟也派出了 IE 8 作爲支持這一特性的代表，querySelector 和 querySelectorAll 作爲查找 DOM 的又一途徑，極大地方便了開發者，使用它們，你可以像使用 CSS 選擇器一樣快速地查找到你需要的節點。
querySelector 和 querySelectorAll 的使用非常的簡單，就像標題說到的一樣，它和 CSS 的寫法完全一樣，對於前端開發人員來說，這是難度幾乎爲零的一次學習。假如我們有一個 id 爲 test 的 DIV，爲了獲取到這個元素，你也許會像下面這樣：
document.getElementById("test");
現在我們來試試使用新方法來獲取這個 DIV
document.querySelector("#test");
document.querySelectorAll("#test")[0];
感覺區別不大是吧，但如果是稍微複雜點的情況，原始的方法將變得非常麻煩，這時候 querySelector 和 querySelectorAll 的優勢就發揮出來了。比如接下來這個例子，我們將在 document 中選取 class 爲 test 的 div 的子元素 p 的第一個子元素，當然這很拗口，但是用本文的新方法來選擇這個元素，比用言語來描述它還要簡單。
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
現在應該對於 querySelector、querySelectorAll 方法中的參數已經非常明白了，是的，它接收的參數和 CSS 選擇器完全一致。querySelector 和 querySelectorAll 的區別在於 querySelector 用來獲取一個元素，而querySelectorAll 可以獲取多個元素。querySelector 將返回匹配到的第一個元素，如果沒有匹配的元素則返回 Null。querySelectorAll 返回一個包含匹配到的元素的數組，如果沒有匹配的元素則返回的數組爲空。在本文最後一個例子中，我們使用 querySelectorAll 給所有 class 爲 emphasis 的元素加粗顯示。
var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
emphasisText[i].style.fontWeight = "bold";
}