HTMLCollection vs. NodeList

本文系原创,转载前请邮件联络作者:scorpionlc@yeah.net或直接在评论中留言等候回复

>>> 引文

这篇博客文章缘起于我对一道题目的思考,原题是:

elem.childrenelem.childNodes的区别?

那么这两者的区别究竟是什么呢?当时我写了这样一段代码(这段代码只得到表面上的答案,是浅层次理解)。

1
2
3
4
5
6
7
8
9
<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.paratextContent"Lyndon"
    • p.attrtextContent"123dozz"
  • NodeList
    • texttextContent"↵ "
    • p.paratextContent"Lyndon"
    • texttextContent"↵ "
    • p.attrtextContent"123dozz"
    • texttextContent"↵ "

究竟为何两个方法会返回不一样的结果?有课件归纳如下:

两者的不同点在于:

  1. HTMLCollection对象具有namedItem()方法,可以传递id或name获得元素;
  2. HTMLCollection的item()方法和通过属性获取元素(document.forms.f1)可以支持id和name,而NodeList对象只支持id

但是我并没有完全看懂,大概掌握程度是0.6左右,于是我觉得解决这些疑惑的终极方法,应该是去深入了解:HTMLCollectionNodeList本质上的不同


>>> 首先,参考stack overflow上的回答

我翻译了一下Vote数最高的答案:

HTMLCollectionNodeList都是DOM节点的集合,两者都属于Collections范畴,两者的区别在于:

  • 方法略有差异HTMLCollectionNodeList多了一个namedItem方法,其他方法保持一致
  • 包含节点类型不同NodeList可以包含任何节点类型,HTMLCollection只包含元素节点(ElementNode)

什么时候会用到Collections?

  • 当返回多个节点(如:getElementByTagName)或者得到所有子元素(如:element.childNodes)时,Collections就会出现,这时候就有可能返回HTMLCollection或者NodeList

>>> 其次参考W3的文档(MDN上也有详细解释):

HTMLCollection是以节点为元素的列表,可以凭借索引、节点名称、节点属性来对独立的节点进行访问。HTML DOM中的Collections是实时变动的,当原始文件变化,Collections也会随之发生变化。

  • 属性:length(返回的是列表的长度)
  • 方法1:item(通过序号索引来获取节点,参数是索引值,超过索引值返回null)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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.


>>> 总结

综上所述,进行归纳,并回答文章开头提出的疑问。

  • HTMLCollectionNodeList的共同点显而易见:

    1. 都是类数组对象,都有length属性
    2. 都有共同的方法:item,可以通过item(index)或者item(id)来访问返回结果中的元素
    3. 都是实时变动的(live),document上的更改会反映到相关对象上(例外:document.querySelectorAll返回的NodeList不是实时的)
  • HTMLCollectionNodeList的区别是:

    1. NodeList可以包含任何节点类型,HTMLCollection只包含元素节点(elementNode),elementNode就是HTML中的标签
    2. HTMLCollectionNodeList多一项方法:namedItem,可以通过传递id或name属性来获取节点信息
  • 文章开头的疑问解答:
    文章开头的代码实际上等价于:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    这里是介于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,这样写就可以了:

1
2
3
4
5
6
7
8
9
10
11
<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);

有一些参考资料还详细给出了有哪些具体的方法可以获取HTMLCollectionNodeList对象,如果要记住可能比较麻烦,每次在具体情况时参考控制台的输出,得知类型后只需要记住常用的方法区别就可以轻松地进行操作了。


>>> 参考资料

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