NodeList 和 HTMLCollection 和 Array的解析

PHP中文网 • 2025年3月8日 04:14:50 • 编程技术 • 阅读 2

这篇文章主要介绍了关于nodelist 和 htmlcollection 和 array的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

Array，NodeList， HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚，经常遇到但是又感觉很陌生，剪不断理还乱的感觉。今天咱们就来理清这三个东西。

对于Array大家差不多都能弄明白，但是HTMLCollectio、NodeList和Array的关系好像总是很暧昧，有一点像但是又不那么像，可能是我比较笨，但是真的被它们弄得很头疼啊，所以今天下决心必须弄懂它们。

咱们先不管那么多概念和定义，先来看看这三个东西到底长什么样。咱们先创建一个html文件，里面就放三个嵌套的p：

Document

登录后复制

NodeList

首先让我们来研究一下NodeList，在浏览器中打开这个html文件，打开控制台输入:

立即学习“前端免费学习笔记（深入）”；

document.querySelectorAll('p')

登录后复制

打印结果

我们发现返回的NodeList中包含这三个p。展开NodeList的__proto__属性后发现，NodeList继承于一个NodeList对象，而这个NodeList对象又继承于Object对象。

NodeList除了length属性外还有其他5个方法（method），分别是entries, forEach, item, keys, values，这五个方法都是干什么用的呢？用一遍就知道：

entries()：

调用entries方法会返回一个iterator（迭代器），关于iterator/iterable可以参见MDN，简单点说就是返回了一个可以遍历的对象，而这个对象实现了iterable protocal，所以需要用for…of遍历，所以我们可以：

var ps = document.querySelectorAll('p');for(var item of ps.entries()){    console.log(item);}

登录后复制

结果返回了三个包含三个p对象数组（为什么不是三个key-value pair？），如图：

forEach():

forEach的用法和Array的forEach用法一样，都是用于遍历集合元素：

var ps = document.querySelectorAll('p');ps.forEach(function (el, index, list) {    console.log(el);});

登录后复制

item():

item()用于从NodeList中获取单个节点元素：

var ps = document.querySelectorAll('p');console.log(ps.item(0));

登录后复制

打印结果：

keys():

返回一个iterator用于遍历NodeList的key：

var ps = document.querySelectorAll('p');for (var key of list.keys()) {    console.log(key);}

登录后复制

打印结果：

values():

和keys()类似，返回一个iterator用于遍历NodeList的value，即html元素：

var ps = document.querySelectorAll('p');for (var value of ps.values()) {    console.log(value);}

登录后复制

打印结果：

通过对NodeList的研究我们发现，NodeList和Array没有继承关系，但是都有length属性和forEach方法，而且拥有几个特有的方法，主要都是用来遍历和取值用的。

HTMLCollection

认识了NodeList，我们再来认识一下HTMLCollection，同样我们先获取到一个HTMLCollection，在控制台中输入并执行：

document.getElementsByTagName('p')

登录后复制

打印结果：

可以看到得到的HTMLCollection继承于一个HTMLCollection对象，而HTMLCollection又直接继承于Object对象，所以它和NodeList是平级的。HTMLCollection和NodeList一样包含了查询得到的html元素，length属性和item方法，但没有NodeList的entries, forEach, keys, values这四个方法，但是又多了一个namedItem（根据id和name筛选元素）方法…

看到了NodeList和HTMLCollection这两个家伙的真容，我们很好奇这两个有很多相似又相互独立的家伙是怎么被发明出来的呢？什么情况下得到的是NodeList，什么情况是HTMLCollection呢？

MDN上是这么介绍HTMLCollection的：

Note: This interface is called HTMLCollection for historical reasons (before the modern DOM, collections implementing this interface could only have HTML elements as their items).

翻译一下就是：
之所以叫它HTMLCollection是因为某些历史原因，在新一代DOM出现之前，实现HTMLCollection这个接口的集合只包含HTML元素，所以命名为HTMLCollection。

我们知道DOM节点（node）不光包含HTML元素，还包含text node（字符节点）和comment（注释），既然HTMLCollection只包含HTML元素，那NodeList是不是会包含所有类型的DOM节点呢，我们来试验一下，先写一段html：

this is patent content

this is child content

登录后复制

然后执行：

var parent = document.querySelector('.parent');console.log(parent.childNodes);

登录后复制

打印结果：

我们看到childNodes返回的是第一个p下面的所有DOM节点，包含3个text node（其中两个是换行符），一个子p，一个comment。这证实了我们对NodeList的猜想。

我们再看一下HTMLCollection，执行：

var parent = document.querySelector('.parent');console.log(parent.children);

登录后复制

打印结果：

只包含了子p，也验证了MDN上的说法。

至于parent即有childNodes属性，又有children属性呢？

因为parent即是一个Node对象（拥有childNodes属性），又因为它有子元素所以它又是一个ParentNode对象（拥有children属性）。

至此，我们对NodeList和HTMLCollection应该有一个比较全面的认识，总结一下就是HTMLCollection是比较早期的模型，只能包含HTML元素，早期就有的接口如document.getElementsByClassName, document.getElementsByTagName返回的就是HTMLCollection。NodeList是比较新的模型，相比HTMLCollection更加完善，不光有HTML元素，还有text节点和comment。比较新的接口如document.querySelectorAll返回的就是NodeList。

关于NodeList，HTMLCollection和Array的关系，就是长得像，有个别相似的功能，但是是完全不一样的东西。

当然关于HTMLCollection和NodeList的故事还没有讲完，因为它们有时候是live（活的？动态的？），有时候是not live（死的？静态的？），关于这个话题，之后的文章再详细分析。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

关于作者

PHP中文网签约作者

430.9K 文章

0 评论

1 粉丝

php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！

vue的父子组件，父子组件传值和vuex的浅析

上一篇 2025年3月8日 04:14:46

JavaScript创建对象的四种方式

下一篇 2025年3月8日 04:14:55

JavaScript创建对象的四种方式

这篇文章主要介绍了关于javascript创建对象的四种方式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下关键字 Object.create; new Object(); new Fn(); {} 背景此段可跳过不读……

PHP中文网
编程技术 2025年3月8日
0000
vue的父子组件，父子组件传值和vuex的浅析

这篇文章主要介绍了关于vue的父子组件，父子组件传值和vuex的浅析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、vue的父子组件之间是如何传值的？首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间…

PHP中文网
编程技术 2025年3月8日
2000
vue 实现数字滚动增加效果

这篇文章主要介绍了关于vue 实现数字滚动增加效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^ 数字滚动组件： 0 expo…

PHP中文网
编程技术 2025年3月8日
2000
编程技术

Jquery添加loading过渡遮罩

这篇文章主要介绍了关于jquery添加loading过渡遮罩，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下用webpack打包一个h5项目，css也打包在bundle.js里，加载稍慢就会有有几秒钟页面呈现出一个没有样式…

PHP中文网
2025年3月8日
2000
JS实现希尔排序

这篇文章主要介绍了关于js实现希尔排序，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下希尔排序本质上是一种插入排序，但是对数列进行了等间隔分组处理，在每一组中做插入排序，这一优化使得原本 O(n^2) 的时间复杂度一下降…

PHP中文网
2025年3月8日 • 编程技术
2000
编程技术

JS实现归并排序

这篇文章主要介绍了关于js实现归并排序，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下递归的内存堆栈分析一直对递归理解不深，原因是递归的过程很抽象，分析不清内存堆栈的返回过程。偶然google到一篇博文递归(不得不说，技术…

PHP中文网
2025年3月8日
2000
原生JS基于window.scrollTo()封装垂直滚动动画工具函数

这篇文章主要介绍了关于原生js基于window.scrollto()封装垂直滚动动画工具函数，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下概要：原生JS基于window.scrollTo()封装垂直滚动动画工具函数，可…

PHP中文网
编程技术 2025年3月8日
2000
JS实现堆排序

这篇文章主要介绍了关于js实现堆排序，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下堆的预备知识堆是一个完全二叉树。完全二叉树：二叉树除开最后一层，其他层结点数都达到最大，最后一层的所有结点都集中在左边（左边结点排列满…

PHP中文网
2025年3月8日 • 编程技术
2000
react 官网动画库（react-transition-group）的新写法

这篇文章主要介绍了关于react 官网动画库（react-transition-group）的新写法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、react-transition-group 一个官网提供的动画过度库…

PHP中文网
编程技术 2025年3月8日
2000
node爬取拉勾网数据并导出为excel文件

这篇文章主要介绍了关于node爬取拉勾网数据并导出为excel文件，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下前言之前断断续续学习了node.js，今天就拿拉勾网练练手，顺便通过数据了解了解最近的招聘行情哈！node方…

PHP中文网
2025年3月8日 • 编程技术
2000

发表回复

登录后才能评论

NodeList 和 HTMLCollection 和 Array的解析

NodeList

打印结果

entries()：

forEach():

item():

keys():

values():

HTMLCollection

关于作者

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

分享到:

请登录

AD推荐黄金广告位招租... 更多推荐