jquery寫得多了，原生js大API就容易忘。如果你也是這樣，一起來回顧一下HTML5的類jquery選擇器querySelector和querySelectorAll吧，querySelectorAll這個API有兩個需要注意的點，見下文。
先看看querySelector，語法：
dom.querySelector(selectors)
dom即任意dom元素，selectors是一個css選擇器字符串，什么是css選擇器字符串？什么類選擇器、ID選擇器、元素選擇器都是css選擇器字符串
querySelector返回dom的子元素中第一個符合selectors選擇器字符串的元素，無匹配項則返回null
example：
<div id="contani">
<div>
Tencent
</div>
<div>
Alibaba
</div>
</div>
<script>
console.log( document.querySelector('#contani div') )
</script>
結果輸出的是<div>Tencent</div>這個div
querySelectorAll，語法：
dom.querySelectorAll(selectors)
和上面一樣，不同的是它返回的是匹配的所有元素列表，是一個nodeList集合，而且是non-live的
example：（html結構還是和上面一樣）
console.log( document.querySelectorAll('#contani div') )
結果當然是返回了兩個子div
什么叫non-live？理解為不會實時更新就好了，querySelectorAll匹配的元素有變化時，它的結果也不會實時更新，這是要注意的第一點
example：
<div id="contani">
<div class="child">
Tencent
</div>
<div class="child">
Alibaba
</div>
</div>
<script>
var m = document.querySelectorAll('.child');
var n = document.getElementsByClassName('child');
console.log( 'querySelectorAll: ' + m.length )
console.log( 'getElementsByTagName: ' + n.length )
var newDiv = document.createElement('div');
newDiv.className = 'child';
contani.appendChild(newDiv);
console.log('---------append child---------')
console.log( 'querySelectorAll: ' + m.length )
console.log( 'getElementsByTagName: ' + n.length )
</script>
輸出：
事實證明，js動態創建了一個class為child的div插入到contani容器中，querySelectorAll的結果集並未實時更新，而getElementsByTagName的結果集是live實時更新的。
關於querySelectorAll另外要注意的一點是：當且僅當querySelectorAll的選擇器字符串是‘div div’時（如：dom.querySelectorAll(‘div div’)），它匹配的元素包括了dom，也就是說如果該dom元素和它的子元素構成了div div這種父子結構時，也會被匹配到。
example：
<div class="contani">
<div class="contani">
Qihoo
<div>Safe</div>
</div>
<div class="child">
Tencent
<div>QQ</div>
</div>
<div class="child">
Alibaba
<div>Alipay</div>
</div>
</div>
<div class="child">
Baidu
<div>Family tong</div>
</div>
<script>
console.log( document.querySelectorAll('.contani div div').length )
console.log( document.querySelector('.contani').querySelectorAll('div div').length )
console.log( document.querySelectorAll('div div').length )
</script>
console.log( document.querySelectorAll('.contani div div').length )
console.log( document.querySelector('.contani').querySelectorAll('div div').length )
這兩種匹配結果看似一樣，實際上是不是一樣的呢？結合上文所講，自己先想想結果是多少，然后再戳這里查看結果驗證自己是否理解了本文所講的內容吧
作者：古德God
出處：http://www.cnblogs.com/wangmeijian
本文版權歸作者和博客園所有，歡迎轉載，轉載請標明出處。
如果您覺得本篇博文對您有所收獲，請點擊右下角的 [推薦]，謝謝！