getElementById和querySelector方法的区别

1.getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

　　举例：

 1 <ul>
 2     <li>aaa</li>
 3     <li>ddd</li>
 4     <li>ccc</li>
 5 </ul>
 6  
 7 //demo1
 8 var ul = document.getElementsByTagName('ul')[0],
 9       lis = ul.getElementsByTagName("li");
10 for(var i = 0; i < lis.length ; i++){
11      ul.appendChild(document.createElement("li"));
12 }
13 console.log( lis.length);  //6
14  
15 //demo2
16 var ul = document.querySelectorAll('ul'),
17       lis = ul.querySelectorAll("li");
18 for(var i = 0; i < lis.length ; i++){
19      ul.appendChild(document.createElement("li"));
20 }
21 console.log( lis.length);  //3

2.querySelector和querySelectorAll

　　querySelector()方法仅仅放回配置指定选择器的第一个元素；querySelectorAll（）返回匹配选择器的所有元素；