HtmlCollection & NodeList

HtmlCollection & NodeList 的区别

HTMLCollection将仅包含任何元素节点，具有一个namedItem方法
NodeList可以包含任何节点类型（包括元素节点，文本节点，属性节点等）

node.childNodes 返回NodeList （动态）
node.children 返回HTMLCollection （动态）
document.getElementsByXXX() 返回HTMLCollection（动态）
document.querySelectorAll(返回NodeList （静态）

扩展：
静态NodeList和动态NodeList区别
静态NodeList：当对动态添加节点时，不会在集合NodeList中反映出来
动态NodeList：对Dom节点进行添加，删除等操作时，会实时的映射到集合上

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // 我们得到了 "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // 此时输出 "3"

querySelectorAll 返回的是静态的NodeList，只是在被调用时刻文档节点状态的快照
node.children node.childNodes getElementsByTagName返回的是动态的NodeList，会随着文档的更新而更新

getElementsByTagName比querySelectorAll在获取速度要较快的
原因：动态NodeList比静态NodeList执行速度要来得快
1.StaticNodeList对象实例由另外一个文件创建，然后循环填充所有的数据。
2.DynamicNodeList(动态NodeList)对象通过在cache缓存中注册它的存在并创建。
从本质上讲，创建一个新的DynamicNodeList是非常轻量级的，因为不需要做任何的前期工作。
每次访问 DynamicNodeList 时, 必须查询 document 的变化, length 属性 以及 item() 方法证明了这一点
结论：getElementsByTagName（动态NodeList） 创建过程不需要获取整个节点的所有信息，只需要知道有这个dom节点的存在并创建它即可，
而querySelectorAll（静态NodeList）会循环遍历所有的信息（如果节点数量多的话耗时大），然后创建一个文件存储它们。