HTMLCollection 与 NodeList 有什么区别呢？
一、首先，参考stack overflow上的回答
1、HTMLCollection与NodeList都是DOM节点的集合，两者都属于Collections范畴，两者的区别在于：
方法略有差异：HTMLCollection比NodeList多了一个namedItem方法，其他方法保持一致
包含节点类型不同：NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（ElementNode）
2、Collections的出现场景？
当返回多个节点（如：getElementByTagName）或者得到所有子元素（如：element.childNodes）时，Collections就会出现，这时候就有可能返回HTMLCollection或者NodeList
二、其次参考W3的文档（MDN上也有详细解释）：
1、HTMLCollection是以节点为元素的列表，可以凭借索引、节点名称、节点属性来对独立的节点进行访问。HTML DOM中的Collections是实时变动的，当原始文件变化，Collections也会随之发生变化。
三、Element与Node
Node是一个基础类型，document, element, text, comment, DocumentFragment等都继承于Node.其实element, text, comment都是Node的子类，可以将它们视为：elementNode, textNode以及commentNode.平时在DOM中最常用的Element对象，其本质就是elementNode.由于Node就是DOM的结构，代码内容经过解析后，Node与Node之间可以插入文本，Node之间的空隙，这种空隙的本质是textNode.
综上所述，进行归纳，并回答文章开头提出的疑问。
一、HTMLCollection和NodeList的共同点：
1、都是类数组对象，都有length属性
2、都有共同的方法：item，可以通过item(index)或者item(id)来访问返回结果中的元素
3、都是实时变动的（live），document上的更改会反映到相关对象上（例外：document.querySelectorAll返回的NodeList不是实时的）
二、HTMLCollection和NodeList的区别是：
1、NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签
2、HTMLCollection比NodeList多一项方法：namedItem，可以通过传递id或name属性来获取节点信息
这里是介于node与node之间的textNode
<div id="ct">
这里是介于node与node之间的textNode
<p class="para">Lyndon</p>
这里是介于node与node之间的textNode
<p class="attr">123<span>dozz</span></p>
这里是介于node与node之间的textNode
</div>
<script>
var ct = document.getElementById("ct");
console.log(ct.children);
console.log(ct.childNodes);
</script>
<div id="ct">
这里是介于node与node之间的textNode
<p class="para">Lyndon</p>
这里是介于node与node之间的textNode
<p class="attr">123<span>dozz</span></p>
这里是介于node与node之间的textNode
</div>
<script>
var ct = document.getElementById("ct");
console.log(ct.children);
console.log(ct.childNodes);
</script>
由于NodeList包含任何节点类型，ct.childNodes会一并返回textNode, elementNode等，所以最终结果就是由text, p, text, p, text组成的类数组对象，这里的text只是换行符而已。
由于HTMLCollection仅包含elementNode，因此最终的结果就是由p.para, p.attr组成的类数组对象。当然，由于这里只返回直接的子元素，因此不会出现类数组对象中没有span
