querySelectorAll与getElementByTagName的区别

这两个方法都是用来获取元素的DOM方法，不同的是 querySelectorAll 方法返回的是一个 NodeList 节点列表，而 getElementByTagName 方法返回的是一个 HTMLCollection 集合。

两个方法的区别就在于 NodeList 与 HTMLCollection 的区别。

NodeList 是一个静态对象，从捕获到这个对象开始，里面的元素就是固定不变的。
HTMLCollection 是一个动态集合，里面的元素是动态变化的。

这么说可能有些人会一头雾水，举例说明就一目了然了，上代码：

[JavaScript] 纯文本查看 复制代码

<ul id="demo">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<script>
  var ul = document.getElementById('demo');
  var li1 = ul.getElementsByTagName('li');
  var li2 = ul.querySelectorAll('li');

  var li3 = document.createElement('li');  
  ul.appendChild(li3);

  console.log(li1.length, li2.length); // 5, 4

  var li4 = document.createElement('li');  
  ul.appendChild(li4);

  console.log(li1.length, li2.length); // 6, 4
</script>

从上面的例子可以看到，querySelectorAll 获取到的是到这个方法执行为止之前的元素，之后即使再有元素变化，li2中始终只有之前的4个元素。而getElementsByTagName则不同，li1里面的元素数量是动态变化的，会随着实际元素数量的变化而实时更新。

以上就是这两个方法的区别，querySelectorAll 方法应该是借鉴jquery的选择器而产生的，上面例子中，将 querySelectorAll 方法换成jquery选择器，会得到相同的结果。