NodeList 和 HTMLCollection 和 Array的解析-js教程-PHP中文网

首页

web前端

js教程

NodeList 和 HTMLCollection 和 Array的解析

不言

Jul 07, 2018 pm 05:30 PM

htmlhtml5javascript

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p class="test-p">
        p1
        <p class="test-p">
            p2
            <p class="test-p">
                p3
            </p>
        </p>
    </p>
</body>
</html>

NodeList

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

document.querySelectorAll('p')

打印结果

3696845513-5b3e460ea0b00_articlex[1].jpg

我们发现返回的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？），如图：

1657990056-5b3e460e94256_articlex[1].jpg

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));

打印结果：
2466365985-5b3e460e7935f_articlex[1].jpg

keys():

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

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

打印结果：
4100756640-5b3e460e29612_articlex[1].jpg

values():

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

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

打印结果：
2894857841-5b3e460e51647_articlex[1].jpg

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

HTMLCollection

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

document.getElementsByTagName('p')

打印结果：

1101730131-5b3e460e5f45c_articlex[1].jpg

可以看到得到的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：

<p class="parent">
    this is patent content
    <p class="child">
        this is child content
    </p>
    <!-- this is comment -->
</p>

然后执行：

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

打印结果：

371349160-5b3e460e2e8f7_articlex[1].jpg

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

我们再看一下HTMLCollection，执行：

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

打印结果：

817562099-5b3e460e41d00_articlex[1].jpg

只包含了子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中文网！

相关推荐：

JavaScript创建对象的四种方式

浏览器与NodeJS的EventLoop异同以及部分机制

用Node提供静态文件服务

以上是NodeList 和 HTMLCollection 和 Array的解析的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。