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

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

news 2025/7/8 20:34:58

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

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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/7/8 12:04:09

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/6/21 13:23:32

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/7/7 16:37:17

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/8 19:39:35

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/7/8 11:04:02

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/7/8 3:25:42

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/7/8 7:55:31

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/7/8 2:25:37

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/7/7 21:43:14