DOM中的节点,NodeList集合和HTMLCollection集合的区别？

最新推荐文章于 2023-08-30 09:22:27 发布

꒰ঌsnail໒꒱

最新推荐文章于 2023-08-30 09:22:27 发布

阅读量216

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46839072/article/details/125218834

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、DOM和Element

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

下图可以很好的理解：
在这里插入图片描述

二、HTMLCollection和NodeList简单例子

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

看一段代码：

<body>
    <p id="p1"><b>node</b> different <em>element</em><!--注释--></p>
    <script>
    let p1 = document.getElementById('p1')
    console.log(p1.children)     // HTMLCollection
    console.log(p1.childNodes)   // NodeList
    </script>
</body>

在这里插入图片描述

三、HTMLCollection和NodeList之间的异同

不同点：

HTMLCollection	NodeList
是HTML元素的集合	是文档节点的集合。
可以通过名称，ID或索引号访问HTMLCollection项目	只能通过其索引号访问NodeList项
不包含属性节点和文本节点	只有NodeList对象可以包含属性节点和文本节点
HTMLCollection通过document.getElementByClassName()等方法返回的是动态（live）的HTMLCollection集合	NodeList由Node.childNodes和document.querySelectorAll()返回，不同的是node.ChildNodes返回的是动态（live）的NodeList，而document.querySelectorAll()返回的是静态(static)的NodeList。

相同点：