一、概述
今天在看js的時候發現里面的代碼基本上都是用querySelector()和querySelectorAll()來獲取元素，就有點疑惑為什么不用getElementById(),可能也是因為自己沒用過那兩個，所以並不清楚原因所在。
參考手冊上寫querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素，並且其語法document.querySelector(CSS selectors)接收的參數，可以指定一個或多個匹配元素的 CSS 選擇器，可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素，對於多個選擇器，使用逗號隔開，返回一個匹配的元素。
而且既然都可以實現元素的獲取，而且都可以通過id、類等等來獲取，為什么我們時常用的都是getElementById()，getElementsByClassName()而非那兩個？
二、有關getElement(s)Byxxxx的用法
(1)getElementById()
(2)getElementsByTagName()
（3）getElementsByClassName（）
三、有關querySelector()和querySelectorAll()的用法
（一）querySelector()
（二）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，都是不會對其參數影響。
五、瀏覽器兼容性及兩者的性能
（待補....）