详解NodeList 和 HTMLCollection 和 Array

Array，NodeList， HTMLCollection这三个概念和它们之间的关系有不少作了几年前端的同窗都搞不清楚，常常遇到可是又感受很陌生，剪不断理还乱的感受。今天我们就来理清这三个东西。html

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

我们先无论那么多概念和定义，先来看看这三个东西到底长什么样。我们先建立一个html文件，里面就放三个嵌套的div：node

<!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>
    <div class="test-div">
        div1
        <div class="test-div">
            div2
            <div class="test-div">
                div3
            </div>
        </div>
    </div>
</body>
</html>

NodeList

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

document.querySelectorAll('div')

打印结果

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

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

entries()：

调用entries方法会返回一个iterator（迭代器），关于iterator/iterable能够参见MDN，简单点说就是返回了一个能够遍历的对象，而这个对象实现了iterable protocal，因此须要用for...of遍历，因此咱们能够：this

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

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

forEach():

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

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

item():

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

var divs = document.querySelectorAll('div');
console.log(divs.item(0));

打印结果：

keys():

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

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

打印结果：

values():

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

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

打印结果：

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

HTMLCollection

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

document.getElementsByTagName('div')

打印结果：

能够看到获得的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：

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

而后执行：

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

打印结果：

咱们看到childNodes返回的是第一个div下面的全部DOM节点，包含3个text node（其中两个是换行符），一个子div，一个comment。这证明了咱们对NodeList的猜测。

咱们再看一下HTMLCollection，执行：

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

打印结果：

只包含了子div，也验证了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（死的？静态的？），关于这个话题，以后的文章再详细分析。

本文同步分享在博客“MudOnTire”（SegmentFault）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。