【转】HTMLCollection vs. NodeList

我就是我 2021-12-11 04:29 188阅读 0赞

[点击去原文][Link 1]

--------------------

### >>> 引文 ###

这篇博客起源于我对一道作业题的思考，在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>

返回的结果是：

![Image 1][]

可以看出，当我用`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>

![Image 1][]

*  方法2：`namedItem`（用名字来返回一个节点，首先搜寻是否有匹配的id属性，如果没有就寻找是否有匹配的name属性，如果都没有，返回null）

![Image 1][]

> `NodeList`返回节点的有序集合，DOM中的`NodeList`也是实时变动的

*  属性：`length`（列表中节点的数量）
 *  方法：`item`（返回集合中的元素，如果超过范围返回null）

![Image 1][]

--------------------

### >>> Element与Node ###

到这一步，两者本质上的区别已经差不多分清楚了，那么现在就要进入第二个问题，为什么两个Element属性返回的结果（如：`textContent`）不一样呢？这里需要感谢同班同学 **joyside**，他推荐给我一篇文章[《Element和Node的区别你造吗？》][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);

![Image 1][]

老师在课件中还详细给出了有哪些具体的方法可以获取`HTMLCollection`和`NodeList`对象，如果要记住可能比较麻烦，每次在具体情况时参考控制台的输出，得知类型后只需要记住常用的**方法**和**区别**就可以轻松地进行操作了。

--------------------

### >>> 参考资料 ###

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

[Link 1]: https://www.jianshu.com/p/f6ff5ebe45fd
[Image 1]: 
[stack overflow]: https://link.jianshu.com?t=http://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects
[W3]: https://link.jianshu.com?t=https://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-535378264
[Element_Node]: https://link.jianshu.com?t=http://blog.csdn.net/kkkkkxiaofei/article/details/52608394
[Difference between HTMLCollection_ NodeLists_ and arrays of objects]: https://link.jianshu.com?t=http://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects#
[Interface NodeList]: https://link.jianshu.com?t=https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177
[NodeList and HTMLCollection]: https://link.jianshu.com?t=https://www.w3.org/TR/domcore/#old-style-collections:-nodelist-and-htmlcollection