getElementById和querySelector方法的區別

1.getXXXByXXX 獲取的是動態集合，querySelector獲取的是靜態集合。

　　舉例：

　　

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
 
//demo1
var ul = document.getElementsByTagName('ul')[0],
      lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6
 
//demo2
var ul = document.querySelectorAll('ul'),
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

2.querySelector和querySelectorAll

　　querySelector()方法僅僅放回配置指定選擇器的第一個元素；querySelectorAll（）返回匹配選擇器的所有元素；