0%

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