HTMLCollection、 NodeList | children、 childNodes，以及节点类型

1 HTMLCollection

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

注意以下几点：

1. [Docuement, Element].getElementsBy[TagName, ClassName]()返回的就是一个HTMLCollection。

   但是，特殊的是

   1. [Docuement].getElementsByName()返回的是一个NodeLIst，并且只有Document有getElementsByName这一方法，Element并没有。
   2. 且Document.getElementById返回的一个非常原始的基类Element，连HTMLElement都继承自它。

2. node.children返回的也是一个HTMLCollection.

3. node.childNodes返回的是一个NodeList

1.1 在 JavaScript 中使用

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

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

var elem1, elem2;

// document.forms 是一个 HTMLCollection

elem1 = 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

1. for(; ; )

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

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

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

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

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

4. Array.from()，参考资料点这里

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

注意一下几点：

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

2.2 相同之处

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

2.3 不同之处

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

3. children、childNodes的区别

主要区别：

1. childNodes获取元素节点与文本节点，但在不同浏览器中表现不同。
2. children在任何浏览器中只获取元素节点

判断节点类型的方式

if(childNode.nodeName == "#text")

if(childNode.nodeType != '3')

更详细的资料

4 我的总结

NodeList包含元素节点、文本节点、注释节点。
HTMLCollection只包含元素节点。
它们都是类数组结构，应该用for…of遍历。

childNodes返回NodeList
querySelectorAll返回NodeList
children返回HTMLCollection
getElements系列大部分返回的是一个HTMLCollection。除了getElementsByName返回一个NodeList，getElementById返回的是一个基类Element。
querySelector返回的是一个HTMLElement下的细分类，比如HTMLDivElement，HTMLBodyElement。

HTMLCollection都是动态的。
NodeList不总是静态的，在childNodes下是实时的，getElementByName 是实时的，querySelectorAll是静态的。

getELementById和ByName只能作用于document，其他的get系列和query系列能作用于所用HTMLElement元素。