当前位置：首页 > news >正文

HTMLCollection 和 NodeList 的详解，以及两者在开发情况下差异。

news 文章来源：https://blog.csdn.net/m0_57033755/article/details/132040902 2025/5/5 23:49:31

看结果直接看下文的举例子

HTMLCollection

HTMLCollection 表示一个包含了元素(元素顺序为文档流中的接口)的集合(通用集合)，还提供了从该集合中选择元素的属性和方法。

HTMLCollection 对象中的属性和方法：

item(index) —— 返回 HTMLCollection 中指定索引的元素，不存在返回 null。
length(只读)—— 返回 HTMLCollection 中元素的数量。

document.getElementsByTagName('body') instanceof HTMLCollection // trueconst htmlCollection = document.getElementsByTagName('body')
console.log(htmlCollection.item(0)) // <body>...</body>
console.log(htmlCollection.length()) // 1

NodeList

NodeList 对象是节点的集合。它可以通过以下方法得到：

一些旧版本浏览器中的方法(如 getElementsByClassName())，返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 Node.childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 document.querySelectorAll() 返回 NodeList 对象。

document.body.childNodes instanceof NodeList // true
document.querySelectorAll('body') instanceof NodeList // true or false
document.getElementsByClassName('body') instanceof NodeList // false or true

NodeList 对象中的属性和方法：

item() —— 返回某个元素基于文档树的索引
length —— 返回 NodeList 的节点数量。
NodeList.forEach() 方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的 forEach 方法完全一致。
NodeList.keys()/values()/entries() —— 这三个方法都返回一个 ES6 的遍历器对象，可以通过 for...of 循环遍历获取每一个成员的信息。

区别：keys() 返回键名的遍历器，values() 返回键值的遍历器，entries() 返回的遍历器同时包含键名和键值的信息。如果你还不熟悉，可以在我之前写过的一篇 Object.keys/values/entries 了解它基本- 用法。

const nodelist = document.querySelectorAll('body')console.log(nodelist.item(0)) // <body>...</body>
console.log(nodelist.length) // 1
console.log(nodelist.forEach(item => console.log(item))) // <body>...</body>for(var key of nodelist.keys()) {console.log(nodelist[key]) // <body>...</body>
}for(var value of nodelist.values()) {console.log(value) // <body>...</body>
}for(var entry of nodelist.entries()) {console.log(entry) // [0, body]
}

将 NodeList 转换为数组

querySelectorAll 方法返回一个类数组对象称为 NodeList。这些数据结构被称为 “类数组”，因为他们看似数组却没有类似 map、forEach 这样的数组方法。你可以通过下面两种方法将 NodeList 转换为 DOM 元素的数组：

const nodelist = document.querySelectorAll('div')
Array.apply(null, nodelist)

Function.prototype.apply() 方法调用一个具有给定 this 值的函数，以及以一个数组的形式提供的参数。MDN 规定 apply 可以接受类数组对象。如果我们不需要指定方法内 this 的值时传 null 或 0 即可。返回的结果即包含所有数组方法的 DOM 元素数组。

另外你可以使用 Array.prototype.slice 结合 Function.prototype.call 或 Function.prototype.apply，将类数组对象当做 this 传入：

Array.prototype.slice.call(nodelist)
Array.prototype.slice.apply(nodelist)

更简便的方法是使用 ES6 扩展运算符(...)

const nodelist = [...document.querySelectorAll('div')]nodelist.forEach(item => item)
nodelist.slice()

HTMLCollection 与 NodeList 的区别

NodeList 是一个静态集合，其不受 DOM 树元素变化的影响；相当于是 DOM 树快照，节点数量和类型的快照，就是对节点增删，NodeList 感觉不到。但是对节点内部内容修改，是可以感觉到的，比如修改 innerHTML。
HTMLCollection 是动态绑定的，是一个的动态集合， DOM 树发生变化，HTMLCollection 也会随之变化，节点的增删是敏感的。
只有 NodeList 对象有包含属性节点和文本节点。
HTMLCollection 元素可以通过 name，id 或 index 索引来获取。NodeList 只能通过 index 索引来获取。
HTMLCollection 和 NodeList 本身无法使用数组的方法：pop()，push()，或 join() 等。除非你把他转为一个数组，你使用上面所介绍的方法将其转换为数组。

querySelectorAll 和 getElementsByTagName 的区别

querySelectorAll 返回 NodeList 集合；getElementsByTagName 返回 HTMLCollection 集合。

从上面的 HTMLCollection 与 NodeList 的区别可以知道，HTMLCollection 是一个动态集合，DOM 树变化，HTMLCollection 也会随着变化。而 NodeList 是一个静态集合，其不受 DOM 树元素变化的影响；下面是两个例子：

<ul><li></li><li></li><li></li><li>🤣</li><li></li>
</ul>

var oldUl = document.querySelectorAll('ul')[0]
var oldLi = document.querySelectorAll('li')console.log(oldUl) // NodeList [body]
console.log(oldLi.length) // 5var newLi = document.createElement('li')
oldUl.appendChild(newLi)console.log(oldLi.length) // 5
oldLi[oldLi.length - 1].innerHTML = '🤐'
console.log(oldLi[oldLi.length - 1].innerHTML) //  🤐

可以看到，使用 querySelectorAll 获取 <li> 返回的是一个 NodeList 集合。页面 DOM 结构发生改变，其长度不会发生任何变化，而改变 innerHTML，则会发生变化。

var oldUl = document.querySelectorAll('ul')[0]
var oldLi = document.getElementsByTagName('li')console.log(oldUl) // HTMLCollection [body]
console.log(oldLi.length) // 5var newLi = document.createElement('li')
oldUl.appendChild(newLi)console.log(oldLi.length) // 6

可以看到，使用 getElementsByTagName 获取 <li> 返回的是一个 HTMLCollection 集合。页面 DOM 结构发生改变，将动态获取其长度。

HTMLCollection 和 NodeList 的详解，以及两者在开发情况下差异。

HTMLCollection

NodeList

HTMLCollection 与 NodeList 的区别

querySelectorAll 和 getElementsByTagName 的区别

相关文章：

HTMLCollection 和 NodeList 的详解，以及两者在开发情况下差异。

基于FPGA的超声波测距——UART串口输出

Python web实战之 Django 的 MVC 设计模式详解

Stable Diffusion VAE：改善图像质量的原理、选型与使用指南

maven里面没有plugins dependence问题解决

Wi-Fi 6技术详解

【LeetCode】446. 等差数列划分II -- 子序列

几个似非而是的注释问题

【设计模式|上】创建型模式

【JS】类 class

Ubuntu安装harbor（http模式）并随便上传一个

《向量数据库指南》——腾讯云向量数据库Tencent Cloud Vector DB正式上线公测！提供10亿级向量检索能力

1分钟解决github push/pull报错443

vue3学习-ref引用

Docker 容器转为镜像

阿里云服务器免费试用及搭建WordPress网站

整流二极管型号汇总，超齐全

MongoDB 操作命令

markdown高级写作技巧汇总

SpringBoot自动配置原理入门级理解

2023 08.02 小记与展望

MaxPatrol SIEM 增加了一套检测供应链攻击的专业技术

蓝桥杯上岸每日N题第六期(求阶乘)！！！

Codeforces Round 889 (Div. 2)（视频讲解A——D）

K8s安全配置：CIS基准与kube-bench工具

linux安装python和部署Django项目

00-Hadoop入门

SE-Net注意力机制详解

商城免费搭建之java商城开源java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c bbc

推理加速 --- torch.compile