HTMLCollection vs. NodeList

本文章著作权归饥人谷_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是"↵ "

究竟为何两个方法会返回不一样的结果？老师的课件归纳如下：

两者的不同点在于：

1. HTMLCollection对象具有namedItem()方法，可以传递id或name获得元素；
2. 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的共同点显而易见：

  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>

由于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对象，如果要记住可能比较麻烦，每次在具体情况时参考控制台的输出，得知类型后只需要记住常用的方法和区别就可以轻松地进行操作了。

---

>>> 参考资料

1. Difference between HTMLCollection, NodeLists, and arrays of objects
2. Interface NodeList
3. NodeList and HTMLCollection
4. Interface HTMLCollection
5. Element和Node的区别你造吗？