原生JS強大DOM選擇器querySelector與querySelectorAll

在傳統的 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 的優點就發揮出來了。

例如：

html代碼：

<div class="emphasis">我是內容</div>
<div class="emphasis">我是內容</div>
<div class="emphasis">我是內容</div>
<div class="emphasis">我是內容</div>

js代碼：

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
    emphasisText[i].style.fontWeight = "bold";
}

結果如圖：

這是原生方法，比起jquery速度快，缺點是IE六、7不支持。

W3C的規範與庫中的實現

querySelector：return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null .（返回指定元素節點的子樹中匹配selector的集合中的第一個，若是沒有匹配，返回null）

querySelectorAll：return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. （返回指定元素節點的子樹中匹配selector的節點集合，採用的是深度優先預查找；若是沒有匹配的，這個方法返回空集合）

這在BaseElement 爲document的時候，沒有什麼問題，各瀏覽器的實現基本一致；可是，當BaseElement 爲一個普通的dom Node的時候（支持這兩個方法的dom Node ），瀏覽器的實現就有點奇怪了，舉個例子：

<div class="test"  id="testId" >
    <p><span>Test</span></p>
</div>

<script type="text/javascript">
var   testElement= document.getElementById( 'testId' ); 
var   element = testElement.querySelector( '.test span' ); 
var   elementList = document.querySelectorAll( '.test span' ); 
console.log(element);  // <span>Test</span>
console.log(elementList);  // [span]
</script>

按照W3C的來理解，這個例子應該返回：element：null；elementList：[];由於做爲baseElement的 testElement裏面根本沒有符合selectors的匹配子節點；但瀏覽器卻好像無視了baseElement，只在意selectors，也就是說此時baseElement近乎document；這和咱們的預期結果不合，也許隨着瀏覽器的不斷升級，這個問題會獲得統一口徑！

若是每次都這麼長的選擇器感受比較麻煩，那麼能夠這樣優化代碼：

var query = function(selector){
    return document.querySelector(selector);
};

調用方式：

var o = query("#shareOverlay");
o.style.zIndex = 80;
o.className = "overlay overlay-show";

html代碼：

<div id="shareOverlay"></div>

獲得的結果：

<div id="shareOverlay" class="overlay overlay-show" style="z-index: 80;"></div>