JavaScript中HTMLCollection和NodeList的区别

最新推荐文章于 2023-08-01 14:26:52 发布
最新推荐文章于 2023-08-01 14:26:52 发布
阅读量356 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55010007/article/details/124783840
版权

HTMLCollection是HTML元素的集合

NodeList是一个文档节点集合

什么意思呢？听起来是不是很空洞？下面可以通过一个小实例给大家讲解一下：

 

我们创建一个parent的父容器，在parent下创建两个子元素

然后我们在js中拿到这个parent的容器，然后通过parent.childNodes返回该节点的所有子节点

那么其实可以看到他的子节点是一个NodeList（文档节点集合），它包括了parent下的所有子节点（包括节点元素和文本元素）

那么我们再用parent.children语句返回一下

 

可以看到这个时候返回了一个HTMLCollections（HTML元素集合） ，那么他其实只返回了这个父节点下面的HTML节点元素的集合，并没有返回文本元素

代码中的小蜗牛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何对HTMLCollection进行遍历
qq_27009517的博客
08-11 1万+
这里创建一个html和js文档作为示范。 比如我们要获取这两个p标签。 可以看出是一个HTMLCollection。 但却不是一个数组。 先转化为数组。 6 现在就可以进行数组方法的运用了。比如遍历。 ...
JS返回NodeList和HTMLCollection详解
Gorden的博客
08-31 1266
HTML DOM 集合 (Collection) 是一组 HTML 元素，这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成，并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常常见，因为它们可以帮助我们轻松地访问和操作网页中的多个元素。
JavaScript HTML DOM 集合(Collection)
笔记
02-14 1188
HTML DOM 集合 (Collection) 是一组 HTML 元素，这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成，并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常常见，因为它们可以帮助我们轻松地访问和操作网页中的多个元素。HTMLCollection: 该类型的集合包含了一组 HTML 元素，并且这些元素都是有序的。
HTMLCollection
lncci的博客
07-18 5433
1、是什么？ 它是HTML DOM对象的一个接口，这个接口包含了获取到的DOM元素集合，返回的类型是Object。 它很像数组，又不是数组，如果你想使用数组的一些方法操作这个集合，那么不好意思。 它是及时更新的，当文档中的DOM变化是，它是会随之变化的。 属性：HTMLCollection.length，返回集合当中子元素的数目。 它有自带的方法 1.HTMLCo...
HTMLCollection 和 NodeList 的详解，以及两者在开发情况下差异。
柑橘乌云_
08-01 642
NodeList 是一个静态集合，其不受 DOM 树元素变化的影响；相当于是 DOM 树快照，节点数量和类型的快照，就是对节点增删，NodeList 感觉不到。但是对节点内部内容修改，是可以感觉到的，比如修改 innerHTML。 HTMLCollection 是动态绑定的，是一个的动态集合， DOM 树发生变化，HTMLCollection 也会随之变化，节点的增删是敏感的。
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
09-05
总的来说，将HTMLCollection、NodeList和其他伪数组转换为数组是JavaScript中常见的操作，它能让我们充分利用数组的方法进行更灵活的数据处理。通过`makeArray`函数，我们可以确保这些对象能够适应各种需要数组功能...
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
10-28
总的来说，理解和掌握`NodeList`与`HTMLCollection`的区别及其浏览器差异，对于编写高效且兼容的DOM操作代码是非常必要的。在实际开发中，应谨慎使用这些集合对象，并充分考虑各种可能的兼容性问题。
javascript 使用 NodeList需要注意的问题
10-27
理解NodeList及其近亲NamedNodeMap和HTMLCollection，是从整体上透彻理解DOM的关键所在，这三个集合都是“动态的”，换句话说，每当文档结构发生变化时，他们都会得到更新。
JavaScript中DOM对象的思维导图
11-05
`HTMLCollection`和`NodeList`都是存储节点的集合，但它们之间存在区别：`HTMLCollection`动态更新并只包含元素节点，而`NodeList`是静态的，可以包含任何类型的节点。 DOM提供了一种结构化的访问和操作文档的方式...
HTMLCollection 与 NodeList 的区别
Serena_tz的博客
03-10 810
HTMLCollection是 HTML 元素的集合。 NodeList 是文档节点的集合。 NodeList 和 HTML 集合几乎完全相同。 HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。 它们都有定义列表（集合）中项目数的 length 属性。 它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。 访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。 访问 NodeList 项目，只能通过它们的索引号。 只
JavaScript - 父节点 - 兄弟节点 - 子节点 - 对象获取方法 - HTMLCollection对象 和 NodeList 对象 各自所能使用的方法 - 测试 - 新手笔记
Muxiu
03-06 1849
目录基本知识一、js 测试笔记：二、在线测试代码：三、js 方法解析：document.getElementById("demo")document.getElementById("demo").innerHTMLthis 关键字详解parentNodequerySelector()有趣的测试， HTML 语言被覆盖有趣的测试 1 - 获取子节点 - 有趣的 p 标签有趣的测试 2 - 获取子节点有趣的测试 3 - 获取子节点有趣的测试 4 - 获取子节点参考链接 基本知识 理解 HTML 父节点、兄弟节点
JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)
qq_27371025的博客
05-28 1347
前言 我们平常说的查找元素 和 节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？带着这些问题进入本篇的学习。 节点与元素 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 以下示例 <div id="user"&g
HtmlCollection和Nodelist的区别
weixin_45638909的博客
10-24 1486
1.Nodelist是返回节点的集合，而nodelist里面也有数组，因此元素也是节点的一种，也就是元素节点 <div class="a"> <div class="cc"></div> </div> console.log(document.getElementsByClassName('a')[0].childNodes);//nodelist console.log(document.getElementsByClassName('a')[0].c
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
moandaylab
08-02 1418
一文了解DOM操作中的HTMLCollection和NodeList⛱️序言一、基础知识1. 定义（1）HTMLCollection（2）NodeList2. 属性和方法（1）HTMLCollection（2）NodeList二、异同点1. HTMLCollection 与 NodeList 的区别2. querySelectorAll 和 getElementsByTagName 的区别（1）querySelectorAll（2）getElementsByTagName三、结束语
NodeList和HTMLCollection的区别
上庸者-不服周
09-30 1747
NodeList和HTMLCollection的区别
js中HTMLCollection 累数组对象（学习理解）
我只是搬运工的博客
08-31 5480
HTMLCollection表示HTML元素的集合，同样拥有length，item(),[].等属性方法。 常见操作返回HTMLCollection Ele.getElementsByTagName()等 document.scripts //返回所有script标签集合 document.links //返回所有a标签集合 document.images //返回所有img标签集合 doc...
HTMLCollection 对象
CHMBK的博客
10-21 2633
HTMLCollection 对象 getElementsByTagName() 方法返回 HTMLCollection 对象。 HTMLCollection 对象类似包含 HTML 元素的一个数组。 以下代码获取文档所有的 元素： 实例 var x = document.getElementsByTagName(“p”); 集合中的元素可以通过索引(以 0 为起始位置)来访问。 访问第二个 ...
html 定义 集合对象吗,HTMLCollection 对象
weixin_33535402的博客
06-23 625
JavaScript HTML DOM 集合(Collection)本章节介绍如何向文档中添加和移除元素(节点)。HTMLCollection 对象getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。以下代码获取文档所有的 元素：实例var x = document.getElement...
documen,node,nodelist.namednodemap
最新发布
06-14
在Web开发中，`document`, `Node`, 和 `NodeList(namednodemap)` 是三个相关的概念，它们涉及到HTML或XML文档的处理： 1. **document**: 在JavaScript中，`document` 是一个全局对象，代表了当前网页的HTML文档。你可以使用它来获取或操作页面上的元素、属性、事件等。例如，`document.getElementById(id)` 可以用来找到具有指定ID的元素。 2. **Node**: 在DOM（Document Object Model）中，`Node` 是所有文档对象的基类，包括元素节点（Element）、文本节点（Text）等。每个节点都有其自身的属性和方法，如`childNodes` 和 `parentElement`，用于遍历和操作文档结构。 3. **NodeList(namednodemap)**: `NodeList` 是一种表示文档中节点集合的数据结构，但请注意，这个术语通常是指旧版DOM中的行为，特别是在IE6-8等较老的浏览器中。在现代浏览器中，`NodeList` 是一个类似数组的接口，而不是一个真正的类。它类似于`document.querySelectorAll()` 的返回值，提供了对节点的遍历，但是不支持数组的方法。在现代浏览器中，你会更常见地看到`HTMLCollection` 或 `NodeList` 类型转换为 `Array` 对象。 在JavaScript中，如果你想要操作一个NodeList，你需要使用 `.item(index)` 或索引访问，而不是像数组那样用方括号。例如： ```javascript var nodeList = document.getElementsByTagName('div'); for (var i = 0; i < nodeList.length; i++) { console.log(nodeList[i].textContent); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值