【转】HTMLCollection vs. NodeList

最新推荐文章于 2024-07-29 11:49:07 发布

LTIven

最新推荐文章于 2024-07-29 11:49:07 发布

阅读量121

点赞数

分类专栏：前端开发需要回头看的文章成长轨迹 js 文章标签： js THMLCollection NodeList

前端开发同时被 3 个专栏收录

177 篇文章 3 订阅

订阅专栏

需要回头看的文章

126 篇文章 0 订阅

订阅专栏

成长轨迹

123 篇文章 0 订阅

订阅专栏

点击去原文

>>> 引文

这篇博客起源于我对一道作业题的思考，在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的共同点显而易见：
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);