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

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

news 2026/2/11 3:04:26

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

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 HTMLCollection 表示一个包含了元素(元素顺序为文档流中的接口)的集合(通用集合)&#xff0c;还提供了从该集合中选择元素的属性和方法。 HTMLCollection 对象中的属性和方法&#xff1a; item(index) —— 返回 HTMLCollection 中指…...

编程日记 2023/8/2 16:25:55

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

文章目录 前言一、超声波模块介绍1、产品特点2、超声波模块的时序图 二、系统设计1、系统模块框图2、RTL视图 三、源码1、div_clk_us(1us的分频)2、产生驱动超声波的信号3、串口发送模块4、HC_SR04_uart(顶层文件) 四、效果五、总结六、参考资料 前言 环境&#xff1a; 1、Quar…...

编程日记 2023/8/2 16:24:53

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

技术栈&#xff1a;Python、Django、HTML、CSS、JavaScript。 概要 在 Web 开发中&#xff0c;MVC&#xff08;Model-View-Controller&#xff09;模式是一种非常常见的设计模式&#xff0c;它可以帮助我们更好地管理代码&#xff0c;提高代码的可维护性。今天就介绍如何使用 …...

编程日记 2023/8/2 16:23:51

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

VAE Stable Diffusion&#xff08;稳定扩散&#xff09;是一种用于生成模型的算法&#xff0c;结合了变分自编码器&#xff08;Variational Autoencoder&#xff0c;VAE&#xff09;和扩散生成网络&#xff08;Diffusion Generative Network&#xff09;的思想。它通过对变分自…...

编程日记 2023/8/2 16:22:49

maven里面没有plugins dependence问题解决

说明&#xff1a;今天在做Nacos、Dubbo整合的时候&#xff0c;在父模块中做了版本限制&#xff0c;出错后就又把版本控制什么都删掉&#xff0c;回退到最开始的状态&#xff0c;此时父模块下面的服务右侧的 maven里面没有plugins dependence &#xff0c;然后项目全都报错。 问…...

编程日记 2023/8/2 16:21:47

Wi-Fi 6技术详解

1. 介绍 Wi-Fi 6&#xff0c;也称为802.11ax&#xff0c;是Wi-Fi技术的最新标准。它是对之前标准Wi-Fi 5&#xff08;802.11ac&#xff09;的升级和改进&#xff0c;旨在提供更高的速度、更大的容量、更好的性能和更高的可靠性。Wi-Fi 6技术的引入为无线网络带来了革命性的变化…...

编程日记 2023/8/2 16:20:44

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

题目链接 文章目录 1. 思路讲解1.1 dp表的创建1.2 状态转移方程1.3 使用哈希表找到k1.4 初始化1.5 返回值1.6 该题坑爹的一点 2. 代码编写 1. 思路讲解 我们要知道以某个位置为结尾的子序列的数量&#xff0c;可以通过它的以上一位置的为结尾的子序列的数量得知&#xff0c;也…...

编程日记 2023/8/2 16:19:42

几个似非而是的注释问题

C 语言的注释可以出现在 C 语言代码的任何地方。这句话对不对&#xff1f;这是我当学生时我 老师问的一个问题。我当时回答是不对。好&#xff0c;那我们就看看下面的例子&#xff1a; A &#xff09;&#xff0c; int/*...*/i; B &#xff09;&#xff0c; char* s"…...

编程日记 2023/8/2 16:18:41

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

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 设计模式&#xff08;上&#xff09;&#xff1a; 简单工厂模式工厂模式抽象工厂模式建造者模式单例模式 1. 正文 1.1 创建型(Creational Patterns) …...

编程日记 2023/8/2 16:17:37

【JS】类 class

【JS】类 class 定义类类的方法类继承静态方法 类&#xff08;class&#xff09;是用于创建对象的模板。 我们使用 class 关键字来创建一个类&#xff0c;类体在一对大括号 {} 中&#xff0c;我们可以在大括号 {} 中定义类成员的位置&#xff0c;如方法或构造函数。 每个类中…...

编程日记 2023/8/2 16:16:35

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

Ubuntu安装harbor&#xff08;http模式&#xff09; docker和harbor的介绍就免了&#xff0c;都不知道啥东西&#xff0c;还安装搞毛 先安装docker环境 不要问&#xff0c;软件源之类的配置&#xff0c;挨个梭就行 sudo apt update sudo apt install apt-transport-https ca…...

编程日记 2023/8/2 16:15:34

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

8月1日，腾讯云向量数据库（Tencent Cloud Vector DB）已正式上线公测。在腾讯云官网上搜索“向量数据库”，就可以正式体验该产品。 腾讯云向量数据库不仅能为大模型提供外部知识库，提高大模型回答的准确性，还可广泛应用于推荐系统、文本图像检索、自然语言处理等 AI 领域。…...

编程日记 2023/8/2 16:14:33

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

1.打开https://www.ipaddress.com/ 2.复制如图IP地址 3.文件夹打开C:\Windows\System32\drivers\etc&#xff0c;复制hosts文件&#xff0c;粘贴到桌面 4.在桌面用记事本打开复制过来的hosts 5.在末尾加上一行&#xff0c;IP写刚才复制的 6.复制桌面的hosts,粘贴回C:\Window…...

编程日记 2023/8/2 16:13:26

vue3学习-ref引用

模板引用 使用特殊的 refattribute 允许再特定的Dom或组件被挂在后&#xff0c;获取他的直接引用。 import { ref } form vue const input ref(null) <input ref"input"/>注意&#xff1a;只可以在组件挂载后才能访问模板引用 #如果你需要侦听一个模板引用 r…...

编程日记 2023/8/2 16:12:25

Docker 容器转为镜像

# 容器转成镜像并指定镜像名称与版本号 # commit 时原有容器挂载的目录是不会被写入到新的镜像中去的&#xff0c;数据卷相关的都不会生效 # 但是 root 目录下新建的内容会写入到新的镜像中去 $ docker commit 容器ID 新镜像名称:版本号 $ docker commit -m"描述信息"…...

编程日记 2023/8/2 16:11:24

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

文章目录 前言一、免费试用1、选择使用产品2、进行产品配置3、远程连接阿里云服务器①、重置实例密码②、SecureCRT 远程链接③、Workbench 远程链接二、搭建 WordPress 网站1、开放搭建 WordPress 需要的端口2、搭建 LAMP 环境①、Linux 系统升级和更新源②、安装 Apache2③、…...

编程日记 2023/8/2 16:10:22

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

整流二极管是什么二极管&#xff1f;查看资料可知&#xff0c;整流二极管是一种将交流电能转变为直流电能的半导体器件&#xff0c;可见整流二极管的作用重在“整流”。整流二极管主要用于各种低频半波整流电路&#xff0c;如需达到全波整流需连成整流桥使用。近日&#xff0c;…...

编程日记 2023/8/2 16:09:21

MongoDB 操作命令

创建database 有就切换没有创建 useMydatabase 显示数据库&#xff1a;show dbs显示该database下的 bson对象 show collections 显示该bson下的具体内容**mydatabase.mycollection.find()**查询该bson对象内容**且查询****mydatabase.mycollection.find({a:,b:})****或查询****…...

编程日记 2023/8/2 16:08:20

markdown高级写作技巧汇总

文章目录 1 代码diff2 待办事项3 图片设置宽高4 折叠5 锚点链接实现方式① Markdown 原始写法 [名称](#id)② HTML 语法 名称 6 目录树7 换行 1 代码diff 如果你做过代码 Code Review&#xff0c;对下面这种效果肯定很熟悉 // 数组去重 const unique (arr)>{ - return A…...

编程日记 2023/8/2 16:07:17

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

简单理解 spring中&#xff0c;我们配置一个bean有两种方式&#xff0c;一种是xml标签的形式&#xff0c;一种是通过java类的形式。那么自动装配就是通过java类的形式来配置bean。 不同的是&#xff0c;springboot将这些我们需要的bean提前配置好了以java类的形式存放在META-I…...

编程日记 2023/8/2 16:06:16

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/8 4:37:08

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/2/8 7:23:45

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2026/2/1 7:05:28

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2026/1/31 13:18:46

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51