querySelectorAll 和 getElementsByTagName 的区别

当我们通过 tag 来选取页面元素（比如 p 元素）的时候，有两种方法，document.querySelectorAll(‘p’) 和 document.getElementsByTagName(‘p’)。他们在使用时有稍许不同，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List（via）。大致可以理解为，getElementsByTagName 返回的是一个可变的对象，当 DOM 刷新的时候，这个对象里面的值也会发生改变，而 querySelectorAll 返回的是一个静态的对象，其值不随 DOM 刷新而改变，所以当页面动态刷新时，两个值是不同的。见代码：

original

document.addEventListener('DOMContentLoaded', function(){
  var div = document.querySelector('div'),
      result = document.querySelector('section'),
      get = document.getElementsByTagName('p'),
      query = document.querySelectorAll('p');
  alert(get.length+ ', ' +query.length); // 1, 1
  addElement(div);
  addElement(div);
  alert(get.length+ ', ' +query.length); // 3, 1
});
var addElement = function(elem){
  var add = document.createElement('p');
  add.innerHTML = 'new line';
  elem.appendChild(add);
};

点击查看 DEMO