翻译一下就是：
之所以叫它HTMLCollection是因为某些历史原因，在新一代DOM出现之前，实现HTMLCollection这个接口的集合只包含HTML元素，所以命名为HTMLCollection。
我们知道DOM节点（node）不光包含HTML元素，还包含text node（字符节点）和comment（注释），既然HTMLCollection只包含HTML元素，那NodeList是不是会包含所有类型的DOM节点呢，我们来试验一下，先写一段html：
<p class="parent"> this is patent content <p class="child"> this is child content </p> <!-- this is comment --> </p>
然后执行：
var parent = document.querySelector('.parent');
console.log(parent.childNodes);打印结果：
我们看到childNodes返回的是第一个p下面的所有DOM节点，包含3个text node（其中两个是换行符），一个子p，一个comment。这证实了我们对NodeList的猜想。
我们再看一下HTMLCollection，执行：
var parent = document.querySelector('.parent');
console.log(parent.children);打印结果：
只包含了子p，也验证了MDN上的说法。
至于parent即有childNodes属性，又有children属性呢？
因为parent即是一个Node对象（拥有childNodes属性），又因为它有子元素所以它又是一个ParentNode对象（拥有children属性）。
至此，我们对NodeList和HTMLCollection应该有一个比较全面的认识，总结一下就是HTMLCollection是比较早期的模型，只能包含HTML元素，早期就有的接口如document.getElementsByClassName, document.getElementsByTagName返回的就是HTMLCollection。NodeList是比较新的模型，相比HTMLCollection更加完善，不光有HTML元素，还有text节点和comment。比较新的接口如document.querySelectorAll返回的就是NodeList。
关于NodeList，HTMLCollection和Array的关系，就是长得像，有个别相似的功能，但是是完全不一样的东西。
当然关于HTMLCollection和NodeList的故事还没有讲完，因为它们有时候是live（活的？动态的？），有时候是not live（死的？静态的？），关于这个话题，之后的文章再详细分析。
下载本文