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

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

news 2026/3/29 10:36:11

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

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

KMS_VL_ALL_AIO：智能激活脚本的高效办公解决方案

KMS_VL_ALL_AIO&#xff1a;智能激活脚本的高效办公解决方案 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 在数字化办公环境中&#xff0c;Windows系统和Office办公套件的激活管理常常成为用户…...

编程新知 2026/3/29 9:46:10

智能家居开发实战：用RxAndroidBle3实现多设备扫描与信号过滤（附完整Demo）

智能家居BLE开发进阶&#xff1a;RxAndroidBle3多设备扫描与动态过滤实战 在智能家居场景中&#xff0c;蓝牙低功耗&#xff08;BLE&#xff09;设备的高效扫描与筛选是构建稳定物联网系统的关键技术。本文将深入探讨如何利用RxAndroidBle3框架实现多设备并发扫描、动态信号过滤…...

编程新知 2026/3/29 9:22:02

企业级RAG系统构建：BGE-Reranker-v2-m3镜像部署最佳实践

企业级RAG系统构建&#xff1a;BGE-Reranker-v2-m3镜像部署最佳实践 1. 引言&#xff1a;为什么你的RAG系统总是“答非所问”&#xff1f; 如果你正在构建企业级的RAG&#xff08;检索增强生成&#xff09;系统&#xff0c;一定遇到过这样的尴尬场景&#xff1a;用户问“如何…...

编程新知 2026/3/29 8:25:46

达摩院春联生成模型实战：输入两字祝福词，自动生成上下联和横批

达摩院春联生成模型实战&#xff1a;输入两字祝福词&#xff0c;自动生成上下联和横批 1. 春联生成模型简介 1.1 模型核心功能 达摩院AliceMind团队开发的春联生成模型是一款基于PALM大模型的专用AI工具&#xff0c;它能将简单的两字祝福词转化为完整的春联作品。这个模型特…...

编程新知 2026/3/29 8:17:41

vLLM-v0.17.1效果展示：vLLM在中文长文本摘要任务中的准确率实测

vLLM-v0.17.1效果展示&#xff1a;vLLM在中文长文本摘要任务中的准确率实测 1. vLLM框架简介 vLLM是一个专注于提升大语言模型推理效率的开源库&#xff0c;它的核心目标是让开发者能够更轻松地部署和使用各类大模型。这个项目最初由加州大学伯克利分校的研究团队发起&#x…...

编程新知 2026/3/29 7:59:33

C++ STL 容器线程安全的边界条件

C STL容器线程安全的边界条件探析 在多线程编程中&#xff0c;C标准模板库&#xff08;STL&#xff09;容器的高效使用一直是开发者关注的焦点。尽管STL容器在设计上并未原生支持线程安全&#xff0c;但其性能优势使得开发者仍需在并发环境中谨慎使用。理解STL容器线程安全的边…...

编程新知 2026/3/29 7:47:30

告别数据孤岛：用RTKLIB str2str打通GNSS设备与上位机的通信全链路

高精度定位系统集成实战&#xff1a;RTKLIB str2str的数据枢纽架构设计 在自动驾驶测试场&#xff0c;一台搭载多传感器阵列的无人车正以厘米级精度重复着轨迹跟踪。工程师们通过监控屏观察着实时定位数据流——Ublox接收机的原始观测值、Septentrio的RTCM差分信号、IMU的惯性数…...

编程新知 2026/3/29 7:23:24

终极指南：如何快速配置HsMod插件提升炉石传说游戏体验

终极指南&#xff1a;如何快速配置HsMod插件提升炉石传说游戏体验 【免费下载链接】HsMod Hearthstone Modify Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod HsMod是一个基于BepInEx框架开发的炉石传说游戏插件&#xff0c;专为希望提升游…...

编程新知 2026/3/29 7:19:23

【PyCon 2024闭门报告首发】：基于237个微基准测试的Python 3.14 JIT编译策略矩阵分析

第一章&#xff1a;PyCon 2024闭门报告核心结论与JIT演进全景核心共识&#xff1a;CPython JIT不再追求“全量即时编译” PyCon 2024闭门技术委员会明确指出&#xff0c;CPython 3.13 的JIT策略已从早期“通用LLVM后端”转向聚焦于“热点字节码的增量式优化”。其目标并非替代C…...

编程新知 2026/3/29 6:55:17

5个技巧让旧MacBook Pro重获新生：OpenCore Legacy Patcher完全指南

5个技巧让旧MacBook Pro重获新生&#xff1a;OpenCore Legacy Patcher完全指南 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着科技的快速迭代&#xff0c;许多经典Ma…...

编程新知 2026/3/29 6:06:22