1.区别

getElementsByTagName获取的是动态集合，querySelector获取的是静态集合。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

2.应用场景

如果只要一次查找就可得到元素时，首选querySelector ；
如果需要经过多级查找，才能得到元素时，用getElementsByTagName；

  1. <ul>
  2.     <li>aaa</li>
  3.     <li>ddd</li>
  4.     <li>ccc</li>
  5. </ul>
  6. <script type="text/javascript">
  7.     var ul = document.getElementsByTagName('ul')[0];
  8.     lis = ul.getElementsByTagName("li");
  9.     ul.appendChild(document.createElement("li"));
  10.     console.log( lis.length);  //4
  11. </script> 
  12. <script type="text/javascript">
  13.     var ul = document.getElementsByTagName('ul')[0];
  14.     var lis = document.querySelectorAll('li');
  15.     ul.appendChild(document.createElement("li"));
  16.     console.log( lis.length);  //3
  17. </script>