本文章著作权归饥人谷_Lyndon和饥人谷所有，转载请注明出处
>>> 引文
这篇博客起源于我对一道作业题的思考，在DOM课程中，第二道作业题是：
elem.children和elem.childNodes的区别？
那么这两者的区别究竟是什么呢？当时我在回答的时候写了这样一段代码（这段代码只得到表面上的答案，是浅层次理解）。
<div id="ct">
<p class="para">Lyndon</p>
<p class="attr">123<span>dozz</span></p>
</div>
<script>
var ct = document.getElementById("ct");
console.log(ct.children);
console.log(ct.childNodes);
</script>
返回的结果是：
可以看出，当我用getElementById方法匹配到id = "ct"的元素节点后
- 用
ct.children返回的是一个HTMLCollection（图中已用红框标出），其中包含的两个元素是p.para以及p.attr - 用
ct.childNodes返回的是一个NodeList（图中已用红框标出），其中包含的元素稍微多些，有5项：text,p.para,text,p.attr,text
每一个元素不断展开，会发现有很多的属性，零零碎碎的，这时候我发现一个比较明显的区别是textContent的不同：
- 在
HTMLCollection下-
p.para的textContent是"Lyndon" -
p.attr的textContent是"123dozz"
-
- 在
NodeList下-
text的textContent是"↵ " -
p.para的textContent是"Lyndon" -
text的textContent是"↵ " -
p.attr的textContent是"123dozz" -
text的textContent是"↵ "
-
究竟为何两个方法会返回不一样的结果？老师的课件归纳如下：
两者的不同点在于：
-
HTMLCollection对象具有namedItem()方法，可以传递id或name获得元素； -
HTMLCollection的item()方法和通过属性获取元素(document.forms.f1)可以支持id和name，而NodeList对象只支持id
但是我并没有完全看懂，大概掌握程度是0.6左右，于是我觉得解决这些疑惑的终极方法，应该是去深入了解：HTMLCollection和NodeList本质上的不同。
>>> 首先，参考stack overflow上的回答
我翻译了一下Vote数最高的答案：
HTMLCollection与NodeList都是DOM节点的集合，两者都属于Collections范畴，两者的区别在于：
-
方法略有差异：
HTMLCollection比NodeList多了一个namedItem方法，其他方法保持一致 -
包含节点类型不同：
NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（ElementNode）
Collections的出现场景？
- 当返回多个节点（如：
getElementByTagName）或者得到所有子元素（如：element.childNodes）时，Collections就会出现，这时候就有可能返回HTMLCollection或者NodeList
>>> 其次参考W3的文档（MDN上也有详细解释）：
HTMLCollection是以节点为元素的列表，可以凭借索引、节点名称、节点属性来对独立的节点进行访问。HTML DOM中的Collections是实时变动的，当原始文件变化，Collections也会随之发生变化。
- 属性：
length（返回的是列表的长度） - 方法1：
item（通过序号索引来获取节点，参数是索引值，超过索引值返回null）
<div id="ct">
<p class="para">Lyndon</p>
<p class="attr">123<span>dozz</span></p>
<form action="" method="get" name="apply">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
</form>
</div>
<script>
var ct = document.getElementById("ct");
var a = ct.children;
var b = ct.childNodes;
console.log(a);
console.log(b);
</script>
- 方法2：
namedItem（用名字来返回一个节点，首先搜寻是否有匹配的id属性，如果没有就寻找是否有匹配的name属性，如果都没有，返回null）
<div id="ct">
<p class="para">Lyndon</p>
<p class="attr">123<span>dozz</span></p>
<form action="" method="get" name="apply">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
</form>
</div>
<script>
var ct = document.getElementById("ct");
var a = ct.children;
var b = ct.childNodes;
console.log(a);
console.log(b);
</script>
NodeList返回节点的有序集合，DOM中的NodeList也是实时变动的
- 属性：
length（列表中节点的数量） - 方法：
item（返回集合中的元素，如果超过范围返回null）
<div id="ct">
<p class="para">Lyndon</p>
<p class="attr">123<span>dozz</span></p>
<form action="" method="get" name="apply">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
</form>
</div>
<script>
var ct = document.getElementById("ct");
var a = ct.children;
var b = ct.childNodes;
console.log(a);
console.log(b);
</script>
>>> Element与Node
到这一步，两者本质上的区别已经差不多分清楚了，那么现在就要进入第二个问题，为什么两个Element属性返回的结果（如：textContent）不一样呢？这里需要感谢同班同学 joyside，他推荐给我一篇文章《Element和Node的区别你造吗？》来理解Element和Node的区别。
文章中参考的是MDN：Node是一个基础类型，document, element, text, comment, DocumentFragment等都继承于Node. 在这篇文章最开始的测试中NodeList结果中有非常多的text，其实element, text, comment都是Node的子类，可以将它们视为：elementNode, textNode以及commentNode.平时在DOM中最常用的Element对象，其本质就是elementNode.
由于Node就是DOM的结构，代码内容经过解析后，Node与Node之间可以插入文本，文章最开头的截图中的"↵ "本质上就是Node之间的空隙，这种空隙的本质是textNode.
>>> 总结
综上所述，进行归纳，并回答文章开头提出的疑问。
-
HTMLCollection和NodeList的共同点显而易见：- 都是类数组对象，都有
length属性 - 都有共同的方法：
item，可以通过item(index)或者item(id)来访问返回结果中的元素 - 都是实时变动的（live），document上的更改会反映到相关对象上（例外：
document.querySelectorAll返回的NodeList不是实时的）
- 都是类数组对象，都有
-
HTMLCollection和NodeList的区别是：-
NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签 -
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>
由于NodeList包含任何节点类型，ct.childNodes会一并返回textNode, elementNode等，所以最终结果就是由text, p, text, p, text组成的类数组对象，这里的text只是换行符而已。
由于HTMLCollection仅包含elementNode，因此最终的结果就是由p.para, p.attr组成的类数组对象。当然，由于这里只返回直接的子元素，因此不会出现类数组对象中没有span，如果希望返回结果中有span，这样写就可以了：
<div id="ct">
<p class="para">Lyndon</p>
<p class="attr">
<span>dozz</span>
</p>
<span>bilibili</span>
</div>
<script>
var ct = document.getElementById("ct");
console.log(ct.children);
console.log(ct.childNodes);
老师在课件中还详细给出了有哪些具体的方法可以获取HTMLCollection和NodeList对象，如果要记住可能比较麻烦，每次在具体情况时参考控制台的输出，得知类型后只需要记住常用的方法和区别就可以轻松地进行操作了。
