HTMLCollection 和 NodeList 区别

大杯美式不加糖

于 2023-03-01 14:27:08 发布

阅读量415

点赞数

CC 4.0 BY-SA版权

分类专栏：面试文章标签：前端

本文链接：https://blog.csdn.net/qq_40988677/article/details/129280339

面试专栏收录该内容

9 篇文章

订阅专栏

文章讲述了在DOM中，Node是所有节点的基础，而Element是具体HTML元素的基类。HTMLCollection是Element对象的集合，例如p1元素的children属性返回此类对象。相反，NodeList是Node对象的集合，如p1的childNodes属性返回NodeList，包含了元素的所有子节点，包括文本节点和注释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Node 和 Element

DOM 是一棵树，所有节点都是 Node
Node 是 Element 的基类
Element 是其他 HTML 元素的基类，如 HTMLDivElement

在这里插入图片描述

HTMLCollection 和 NodeList

HTMLCollection 是 Element 的集合
NodeList 是 Node 的集合

<body>
  <p id="p1"><b>node</b>vs<em>element</em><!--这是注释--></p>
</body>
<script>
  const p1 = document.getElementById('p1')
  console.log(p1.children) // HTMLCollection(2) [b, em]
  console.log(p1.childNodes) // NodeList(4) [b, text, em, comment]
</script>