NodeList和HTMLCollection的区别
一、NodeList:文档节点的集合,只能通过索引获取
1、获取NodeList对象的方法:
(1)一些旧版本浏览器中的方法(如 getElementsByClassName()),返回的是 NodeList 对象,而不是 HTMLCollection 对象。
(2)所有浏览器的 Node.childNodes 属性返回的是 NodeList 对象。
(3)大部分浏览器的 document.querySelectorAll() 返回 NodeList 对象。
2、NodeList 对象中的属性和方法:
(1)item() —— 返回某个元素基于文档树的索引
(2)length —— 返回 NodeList 的节点数量。
(3)NodeList.forEach() 方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数,每一轮遍历就执行一次这个回调函数,用法与数组实例的 forEach 方法完全一致。
(4)NodeList.keys()/values()/entries() —— 这三个方法都返回一个 ES6 的遍历器对象,可以通过 for...of 循环遍历获取每一个成员的信息。
区别:keys()
返回键名的遍历器,values()
返回键值的遍历器,entries()
返回的遍历器同时包含键名和键值的信息。
3、示例
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]
}
二、HTMLCollection:html元素的集合,可以通过id、name或索引获取
1、HTMLCollection 对象中的属性和方法:
(1)item(index) —— 返回 HTMLCollection 中指定索引的元素,不存在返回 null。
(2)length(只读)—— 返回 HTMLCollection 中元素的数量。
document.getElementsByTagName('body') instanceof HTMLCollection // trueconst htmlCollection = document.getElementsByTagName('body')
console.log(htmlCollection.item(0)) // <body>...</body>
console.log(htmlCollection.length()) // 1
三、HTMLCollection 与 NodeList 的区别
1、NodeList 是一个静态集合,其不受 DOM 树元素变化的影响;相当于是 DOM 树快照,节点数量和类型的快照,就是对节点增删,NodeList 感觉不到。但是对节点内部内容修改,是可以感觉到的,比如修改 innerHTML。
2、HTMLCollection 是动态绑定的,是一个的动态集合, DOM 树发生变化,HTMLCollection 也会随之变化,节点的增删是敏感的。只有 NodeList 对象有包含属性节点和文本节点。
3、HTMLCollection 元素可以通过 name,id 或 index 索引来获取。NodeList 只能通过 index 索引来获取。
4、HTMLCollection 和 NodeList 本身无法使用数组的方法:pop(),push(),或 join() 等。除非你把他转为一个数组,你使用上面所介绍的方法将其转换为数组。
NodeList和HTMLCollection的区别相关推荐
- nodelist与HTMLCollection
转自:http://www.jianshu.com/p/f6ff5ebe45fd 这篇博客起源于我对一道作业题的思考,在DOM课程中,第二道作业题是: elem.children和elem.child ...
- php nodelist,了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)
本篇文章给大家带来的内容是关于了解NodeList.HTMLCollection以及NamedNodeMap的使用(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 这三个都是类 ...
- NodeList ,HTMLCollection
1.节点都是单个对象,DOM 提供两种节点集合NodeList和HTMLCollection,用于容纳多个节点. 2.NodeList可以包含各种类型的节点,HTMLCollection只能包含 HT ...
- NodeList 和 HTMLCollection
为什么80%的码农都做不了架构师?>>> NodeList 类数组对象 代表节点的集合 部分浏览器为NodeList加入了namedItem接口. 规范: http://www ...
- 获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
- js二十五道面试题(含答案)
目录 1.线程和进程是什么?举例说明 2. js中的基础数据类型有哪几种? 了解包装对象吗? 3.对内存泄漏的了解 4.js中数组合并的方法 5.合并对象的方法 6.什么是作用域,什么是作用域链? 7 ...
- HTMLCollection 和 NodeList 的区别
HTMLCollection HTMLCollection 表示一个包含了元素(元素顺序为文档流中的接口)的集合(通用集合),还提供了从该集合中选择元素的属性和方法. 例如使用 getElements ...
- span居div中_JavaScript-html Dom中的HTMLCollection和NodeList
HTMLCollection对象 HTMLCollection是元素集合,它和NodeList很像,有length属性来表示HTMLCollection对象的长度,也可以通过elements.item ...
- JS 查看标签下某元素所有信息(查看元素,查询元素,遍历元素、HTMLCollection对象、NodeList对象)
NodeList 对象是一个从文档中获取的节点列表 (集合) . NodeList 对象类似 HTMLCollection 对象. 一些旧版本浏览器中的方法(如:getElementsByClassN ...
最新文章
- 在Ubuntu 14.04 64bit上安装思维导图工具XMind
- SAP Marketing Cloud功能简述(一)Contacts和Profiles
- 玩转mini2440开发板之【64位Ubuntu系统无法运行arm-linux-gcc】
- 【HDU - 5187】zhx's contest (快速幂+ 快速乘,模板)
- case when then else多个条件_sqlserver条件分支case when使用教程
- go 修改结构体方法_Go36-13-结构体及其方法
- SpringMVC处理异常
- windows 的一些快捷键
- 【12张手绘图】我搞懂了微服务架构!
- RDP大屏幕报表sql问题
- NSSM部署Net Core流程
- ubuntu 16.04软件源
- 周报-寒假3(淘宝主页项目练习)
- RabbitMQ报错 o.s.a.r.c.CachingConnectionFactory : Channel shutdown: channel error; protocol meth
- 转载-css 属性clip-path之多边形polygon小窥
- 两台电脑之间如何使用共享文件夹来实现共享文件
- Excel技巧 - 换行符用法
- 《调色师手册:电影和视频调色专业技法(第2版)》——数字样片:后期制作的开始...
- 半监督学习:MixMatch
- PHP实现网易夺宝的算法
热门文章
- 从数据保护到统一数据管理平台,爱数的数据之道又升级了!
- jfif格式怎么转换jpg?
- 《路由与交换技术》之 配置VLAN及VLAN间路由(华为)
- 计算机专业和高铁专业哪个好,盘点和高铁技术相关的五大热门专业
- alios thing 信号量_AliOS Things 技术架构-阿里云开发者社区
- php快递单号查询接口实例
- bilibili助手C2C服务器,Bilibili (B站)200万用户数据爬取与分析(附源码)
- 码头仓库转运箱子//力扣
- verilog设计一个分,秒定时器电路:输入时钟1KHZ进行分秒计数
- 基于VHDL的数字时钟实验报告