HTMLCollection、 NodeList | children、 childNodes_综合

1 HTMLCollection

HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection）。HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。

注意以下几点：

[Docuement, Element].getElementsBy[TagName, ClassName]()返回的就是一个HTMLCollection。
但是，特殊的是
1. [Docuement].getElementsByName()返回的是一个NodeLIst，并且只有Document有getElementsByName这一方法，Element并没有。
2. 且Document.getElementById返回的一个非常原始的基类Element，连HTMLElement都继承自它。
node.children返回的也是一个HTMLCollection.
node.childNodes返回的是一个NodeList

1.1 在 JavaScript 中使用

在 JavaScript 中，为了获取给定的 HTMLCollection 的元素，可以使用方括号语法来代替直接调用 item() 或 namedItem() 方法。在方括号中，数值如同 item()，字符串值如同 namedItem()。

例如，假定在文档中有一个 <form> 元素，且它的 id 是 “myForm”：

var elem1, elem2;// document.forms 是一个 HTMLCollectionelem1 = document.forms[0];
elem2 = document.forms.item(0);alert(elem1 === elem2); // 显示 "true"elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");alert(elem1 === elem2); // 显示 "true"

2 NodeList

NodeList 对象是节点的集合，要特别注意的是，NodeList不总是静态的，也就是说，如果文档中的节点树发生变化，NodeList可能会会随之变化。例如，Node.childNodes 是实时的，但document.querySelectorAll是静态的。

NodeList 不是一个数组，是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。你还可以使用 Array.from() 将其转换为数组。

不过，有些浏览器较为过时，没有实现 NodeList.forEach() 和 Array.from()。你可以用 Array.prototype.forEach() 来规避这一问题。请查看该例。

2.1 如何遍历NodeList

for(; ; )

for (var i = 0; i < myNodeList.length; ++i) {var item = myNodeList[i];  // 调用 myNodeList.item(i) 是没有必要的
}

for… of，MDN中推荐使用for ... of来遍历，这是ES6中的新语法，参考链接点这里

let list = document.querySelectorAll('input[type=checkbox]');
for (let checkbox of list) {checkbox.checked = true;
}

还有一种方法，有的浏览器没有在NodeList上实现forEach，但是我们可以手动实现

var list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {checkbox.checked = true;
});

Array.from()，参考资料点这里
不要尝试使用 for…in 或者 for each…in 来遍历一个 NodeList 对象中的元素，因为，如果你把上述两个属性也看成 element 对象的话，NodeList 对象中的 length 和 item 属性也会被遍历出来，这可能会导致你的脚本运行出错。此外，for…in 不能保证访问这些属性的顺序。据说for in会访问原型链上的属性，这个我没有试过。

注意一下几点：

NodeList通常是由属性，如Node.childNodes和方法，如document.querySelectorAll 返回的。
NodeList不总是静态的，也就是说，如果文档中的节点树发生变化，NodeList可能会会随之变化。例如，Node.childNodes 是实时的，但document.querySelectorAll是静态的。

2. 相同之处

它和NodeList都是类数组，没有继承自Array，且都有item方法。因此在遍历他们的时候

3. 不同之处

相比于NodeList，它多了一个HTMLCollection.namedItem()方法，只不过我从来没有用过