一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。
不知道各位看官大老爷，在用习惯了各种框架，各种炫酷的技术的时候，突然发现眼前HTMLCollection和NodeList这两个单词，是否还能想起来它们是什么？
定义
HTMLCollection表示包含了元素的通用集合。
NodeList是节点的集合。
定义在MDN上写的都非常清楚，大家可以点击上方的链接看一下。定义虽然写的很清楚，但是过于官方，过于定义不是很好理解。下面我简单记录一下自己学习相关资料后的理解。
分析
- 要弄懂HTMLCollection和NodeList我们需要先了解一下Element和Node；
- DOM是一棵树，所有的节点都是Node：只要你在DOM树中，你就是Node；
- Node是Element的基类，Node是所有节点的基类
- Element是所有HTML元素的基类。 下面我们来看一张图片：
图一
- 代码演示 用代码模拟一下上方的图片中关于Node和Element
class Node {}
// 文本和注释
class CharacterData extends Node {}
class Comment extends CharacterData {}
class Text extends CharacterData {}
// elem
class Element extends Node {}
class HTMLElement extends Element {}
通过上方的图片和代码，我们就可以很清晰的理解上面描述的几点内容了。
NodeList就是Node的一个集合，而HTMLCollection就是Element的一个集合。这也能和上方的定义对应上。
- 举例。
HTMLCollection&NodeList.html
<body>
<div id="div1"><p>hello</p> world <span>,</span><!--这里是注释--></div>
</body>
<script>
var div1 = document.getElementById('div1');
console.log(div1.children)
console.log(div1.childNodes)
</script>
上方代码运行结果见下图
从图片中也可以看出HTMLCollection只包含了html元素,而NodeList不仅包含了html元素还包含了文本和注释。
总结
理解图一后，就能很清楚的理解HTMLCollection和NodeList的区别：HTMLCollection只能包含html元素，NodeList能够包含所有类型的Node节点
