querySelectorAll( )和getElementsByTagName( )的坑

一. 区别
querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。
前者返回的是NodeList集合，是一个静态集合
后者返回的是HTMLCollection集合，是一个动态集合

二. NodeList集合 / HTMLCollection集合
（1）NodeList集合是由Node.childNodes和document.querySelectorAll()返回的。 NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的元素集合；querySelectorAll() 返回的是一个静态集合，DOM树新增元素不会实时更新
（2）HTMLCollection 返回一个时时包括所有给定标签名称的元素的HTML集合，也就是动态集合，DOM树元素会实时更新
(3)总结 ： 动态集合指的就是元素集合会随着DOM树元素的增加而增加，减少而减少；静态集合则不会受DOM树元素变化的影响。

三、两者速度
（1）getElementsByTagName 比 querySelectorAll 方法快
（2）原因：使用getElementsByTagName方法我们得到的结果就像是一个对象的索引， 而通过querySelectorAll方法我们得到的是一个对象的克隆；所以当这个对象数据量非常大的时候，显然克隆这个对象所需要花费的时间是很长的
（3）打印输出的模式：我们使用的console.time和console.timeEnd方法得出来的时间并不是特别准确的；更准确的做法是使用Performance这个对象提供的now方法来进行计时。

四.删除元素
（1） querySelectorAll() 静态计算 删除是ok的，getElementsByTagName()是动态计算，每删除一个都要重新分配索引
（2）以后删除元素， 用querySelectorAll()

五 、创建元素
(1) querySelectorAll() 静态计算, 新增元素不能更新，必须再次渲染，
getElementsByTagName()是实时更新
(2) 以后创建元素， 用 getElementsByTagName()