querySelector和getElementById之間的區別
一、概述
今天在看js的時候發現裡面的程式碼基本上都是用querySelector()和querySelectorAll()來獲取元素，就有點疑惑為什麼不用getElementById(),可能也是因為自己沒用過那兩個，所以並不清楚原因所在。
參考手冊上寫querySelector() 方法返回文件中匹配指定 CSS 選擇器的一個元素，並且其語法document.querySelector(CSS selectors)接收的引數，可以指定一個或多個匹配元素的 CSS 選擇器，可以使用它們的 id, 類, 型別, 屬性, 屬性值等來選取元素，對於多個選擇器，使用逗號隔開，返回一個匹配的元素。
而且既然都可以實現元素的獲取，而且都可以通過id、類等等來獲取，為什麼我們時常用的都是getElementById()，getElementsByClassName()而非那兩個？
二、有關getElement(s)Byxxxx的用法
(1)getElementById()
該方法將返回一個與之對應id屬性的節點物件，它是document物件特有的函式，只能通過其來呼叫該方法。(2)getElementsByTagName()
該方法返回一個物件陣列（是HTMLCollection集合）,返回元素的順序是它們在文件中的順序,傳遞給 getElementsByTagName() 方法的字串可以不區分大小寫。 如下：（3）getElementsByClassName（）
三、有關querySelector()和querySelectorAll()的用法
（一）querySelector()
方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 返回指定元素節點的子樹中匹配選擇器的集合中的第一個元素，如果沒有匹配返回null。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代． 由於querySelector是按css規範來實現的，所以它傳入的字串中第一個字元不能是數字。（二）querySelectorAll()
四、兩者區別及相應示例程式碼
一般說的都是getElement(s)Byxxxx獲取的是動態集合，querySelector獲取的是靜態集合。不知道別人對這句話是不是看了就明白它們的區別，我是在寫了相關程式碼才get到。
示例：（1）
<body>
<ul id="box">
<li class="a">測試1</li>
<li class="a">測試2</li>
<li class="a">測試3</li>
</ul>
</body>
<script type="text/javascript">
//獲取到ul，為了之後動態的新增li
var ul = document.getElementById('box');
//獲取到現有ul裡面的li
var list = ul.getElementsByTagName('li');
for(var i =0;i<list.length;i++){
ul.appendChild(document.createElement('li')); //動態追加li
}
</script>
上述程式碼會陷入死迴圈，主要是紅色背景的那個迴圈條件，因為在第一次獲取到裡面的3個li後，每當你往ul裡添加了新元素後，list便會更新其值，從新獲取ul裡的所有li。也就是getElement(s)Byxxxx獲取的是動態集合，它總會隨著dom結構的變化而變化。
也就是說每一次呼叫list都會重新對文件進行查詢，導致無限迴圈的問題
示例：（1）修改
一般說的都是getElement(s)Byxxxx獲取的是動態集合，querySelector獲取的是靜態集合。不知道別人對這句話是不是看了就明白它們的區別，我是在寫了相關程式碼才get到。
<body>
<ul id="box">
<li class="a">測試1</li>
<li class="a">測試2</li>
<li class="a">測試3</li>
</ul>
</body>
<script type="text/javascript">
//獲取到ul，為了之後動態的新增li
var ul = document.getElementById('box');
//獲取到現有ul裡面的li
var list = ul.getElementsByTagName('li');
for(var i =0;i<4;i++){
ul.appendChild(document.createElement('li')); //動態追加li
}
console.log(list.length); //7
</script>
將for迴圈條件修改後，新在ul裡添加了4個元素，所有現在打印出來的長度為7。
示例：（2）
<body>
<ul id="box">
<li class="a">測試1</li>
<li class="a">測試2</li>
<li class="a">測試3</li>
</ul>
</body>
<script type="text/javascript">
//獲取到ul，為了之後動態的新增li
var ul = document.querySelector('ul');
//獲取到現有ul裡面的所有li
var list = ul.querySelectorAll('li');
for(var i = 0;i<list.length;i++){
ul.appendChild(document.createElement('li'));//動態追加li
}
console.log(list.length); //輸出的結果仍然是3，不是此時li的數量6
</script>
上述程式碼靜態集合體現在.querySelectorAll('li')獲取到ul裡所有li後，不管後續再動態添加了多少li，都是不會對其引數影響。
五、瀏覽器相容性及兩者的效能
（待補....）