HTMLCollection 和 NodeList 的区别
HTMLCollection
HTMLCollection
表示一个包含了元素(元素顺序为文档流中的接口)的集合(通用集合),还提供了从该集合中选择元素的属性和方法。
例如使用 getElementsByTagName()
方法返回的就是一个 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>
HTMLCollection 和 NodeList 的区别相关推荐
- HTMLCollection 与 NodeList 的区别
HTMLCollection是 HTML 元素的集合. NodeList 是文档节点的集合. NodeList 和 HTML 集合几乎完全相同. HTMLCollection 和 NodeList 对 ...
- HtmlCollection和Nodelist的区别
1.Nodelist是返回节点的集合,而nodelist里面也有数组,因此元素也是节点的一种,也就是元素节点 <div class="a"><div class= ...
- span居div中_JavaScript-html Dom中的HTMLCollection和NodeList
HTMLCollection对象 HTMLCollection是元素集合,它和NodeList很像,有length属性来表示HTMLCollection对象的长度,也可以通过elements.item ...
- HTML列表中项目结点是,HTMLCollection和NodeList
HTMLCollection是元素集合(元素顺序为文档流中的顺序),它和NodeList很像,有length属性来表示HTMLCollection对象的长度,可以通过 item() 传入数字索引来访问 ...
- HTMLCollection vs NodeList
原文地址:HTMLCollection vs NodeList 作者:HungerLyndon 来源:简书 =============================== 正文 =========== ...
- 你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
一文了解DOM操作中的HTMLCollection和NodeList ⛱️序言
- node更改html中的列表,HTMLCollection和NodeList
HTMLCollection是元素集合(元素顺序为文档流中的顺序),它和NodeList很像,有length属性来表示HTMLCollection对象的长度,可以通过 item() 传入数字索引来访问 ...
- NodeList和HTMLCollection的区别
一.NodeList:文档节点的集合,只能通过索引获取 1.获取NodeList对象的方法: (1)一些旧版本浏览器中的方法(如 getElementsByClassName()),返回的是 ...
- JS 查看标签下某元素所有信息(查看元素,查询元素,遍历元素、HTMLCollection对象、NodeList对象)
NodeList 对象是一个从文档中获取的节点列表 (集合) . NodeList 对象类似 HTMLCollection 对象. 一些旧版本浏览器中的方法(如:getElementsByClassN ...
最新文章
- PHP 表单文件上传的原理,php上传文件的原理
- redis和kafka的写性能对比
- java画图颜色_手绘板,多种颜色选择。我抄的《疯狂java讲义》的,包我乱导的,但代码能用。...
- 23.3. 操作系统监控需求
- Java突击学习 Day1
- 语言叮叮消息接口_五分钟学后端技术:如何学习Java工程师必知必会的消息队列...
- 港股互联网券商系统建设
- 在IE缓存文件夹找到我想要的视频
- 【干货】9个网络故障排除经典案例,网工都得会
- 外地人在上海浦东 身份证到期续办
- 苹果开发者账号续费时出现你的支付授权失败,请核对信息并重试..
- 云麦体脂秤华为体脂秤_荣耀体脂秤和小米体脂秤对比哪个好 荣耀/小米体脂秤评测...
- oracle里面的分区索引,oracle patition 分区和索引
- OCR识别技术 文档识别的三种形式
- Java--反编译软件
- 常用计算机高级语言有哪些,计算机高级语言包括哪些?
- 手把手教你解决传说中的NPE空指针异常
- NextCloud安装配置小白教程~
- k-近邻算法实现手写数字识别系统
- Vscode黑色主题很难看到鼠标
热门文章