详解NodeList 和 HTMLCollection 和 Array

2019年8月21日 191次阅读 来源: MudOnTire

Array，NodeList， HTMLCollection这三个观点和它们之间的关联有许多做了几年前端的同砚都搞不清楚，常常碰到然则又觉得很生疏，剪不断理还乱的觉得。本日我们就来理清这三个东西。

关于Array人人差不多都能弄邃晓，然则HTMLCollectio、NodeList和Array的关联彷佛老是很暗昧，有一点像然则又不那末像，多是我比较笨，然则真的被它们弄得很头疼啊，所以本日下决心必需弄懂它们。

我们先不论那末多观点和定义，先来看看这三个东西究竟长什么样。我们先建立一个html文件，内里就放三个嵌套的div：

<!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 和 HTMLCollection 和 Array》

我们发现返回的NodeList中包括这三个div。睁开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 divs = document.querySelectorAll('div');
for(var item of divs.entries()){
    console.log(item);
}

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

《详解NodeList 和 HTMLCollection 和 Array》

forEach():

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

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

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

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

打印效果：
《详解NodeList 和 HTMLCollection 和 Array》

keys():

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

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

打印效果：
《详解NodeList 和 HTMLCollection 和 Array》

values():

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

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

打印效果：
《详解NodeList 和 HTMLCollection 和 Array》

经由过程对NodeList的研讨我们发现，NodeList和Array没有继续关联，然则都有length属性和forEach要领，而且具有几个特有的要领，重要都是用来遍历和取值用的。

HTMLCollection

熟悉了NodeList，我们再来熟悉一下HTMLCollection，一样我们先猎取到一个HTMLCollection，在掌握台中输入并实行：

document.getElementsByTagName('div')

打印效果：

《详解NodeList 和 HTMLCollection 和 Array》

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

打印效果：

《详解NodeList 和 HTMLCollection 和 Array》

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

我们再看一下HTMLCollection，实行：

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

打印效果：

《详解NodeList 和 HTMLCollection 和 Array》

只包括了子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
    原文地址: https://segmentfault.com/a/1190000015498487
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞