摘要：展開的屬性后發(fā)現(xiàn)，繼承于一個(gè)對(duì)象，而這個(gè)對(duì)象又繼承于對(duì)象。這證實(shí)了我們對(duì)的猜想。是比較新的模型，相比更加完善，不光有元素，還有節(jié)點(diǎn)和。關(guān)于，和的關(guān)系，就是長得像，有個(gè)別相似的功能，但是是完全不一樣的東西。

Array，NodeList， HTMLCollection這三個(gè)概念和它們之間的關(guān)系有很多做了幾年前端的同學(xué)都搞不清楚，經(jīng)常遇到但是又感覺很陌生，剪不斷理還亂的感覺。今天咱們就來理清這三個(gè)東西。

對(duì)于Array大家差不多都能弄明白，但是HTMLCollectio、NodeList和Array的關(guān)系好像總是很曖昧，有一點(diǎn)像但是又不那么像，可能是我比較笨，但是真的被它們弄得很頭疼啊，所以今天下決心必須弄懂它們。

咱們先不管那么多概念和定義，先來看看這三個(gè)東西到底長什么樣。咱們先創(chuàng)建一個(gè)html文件，里面就放三個(gè)嵌套的div：

    
    
    
    


    

        div1
        

            div2
            

                div3
            
        
    

首先讓我們來研究一下NodeList，在瀏覽器中打開這個(gè)html文件，打開控制臺(tái)輸入:

document.querySelectorAll("div")

打印結(jié)果

我們發(fā)現(xiàn)返回的NodeList中包含這三個(gè)div。展開NodeList的__proto__屬性后發(fā)現(xiàn)，NodeList繼承于一個(gè)NodeList對(duì)象，而這個(gè)NodeList對(duì)象又繼承于Object對(duì)象。

NodeList除了length屬性外還有其他5個(gè)方法（method），分別是entries, forEach, item, keys, values，這五個(gè)方法都是干什么用的呢？用一遍就知道：

entries()：

調(diào)用entries方法會(huì)返回一個(gè)iterator（迭代器），關(guān)于iterator/iterable可以參見MDN，簡單點(diǎn)說就是返回了一個(gè)可以遍歷的對(duì)象，而這個(gè)對(duì)象實(shí)現(xiàn)了iterable protocal，所以需要用for...of遍歷，所以我們可以：

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

結(jié)果返回了三個(gè)包含三個(gè)div對(duì)象數(shù)組（為什么不是三個(gè)key-value pair？），如圖：

forEach():

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

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

item():

item()用于從NodeList中獲取單個(gè)節(jié)點(diǎn)元素：

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

打印結(jié)果：

keys():

返回一個(gè)iterator用于遍歷NodeList的key：

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

打印結(jié)果：

values():

和keys()類似，返回一個(gè)iterator用于遍歷NodeList的value，即html元素：

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

打印結(jié)果：

通過對(duì)NodeList的研究我們發(fā)現(xiàn)，NodeList和Array沒有繼承關(guān)系，但是都有length屬性和forEach方法，而且擁有幾個(gè)特有的方法，主要都是用來遍歷和取值用的。

認(rèn)識(shí)了NodeList，我們再來認(rèn)識(shí)一下HTMLCollection，同樣我們先獲取到一個(gè)HTMLCollection，在控制臺(tái)中輸入并執(zhí)行：

document.getElementsByTagName("div")

打印結(jié)果：

可以看到得到的HTMLCollection繼承于一個(gè)HTMLCollection對(duì)象，而HTMLCollection又直接繼承于Object對(duì)象，所以它和NodeList是平級(jí)的。HTMLCollection和NodeList一樣包含了查詢得到的html元素，length屬性和item方法，但沒有NodeList的entries, forEach, keys, values這四個(gè)方法，但是又多了一個(gè)namedItem（根據(jù)id和name篩選元素）方法...

看到了NodeList和HTMLCollection這兩個(gè)家伙的真容，我們很好奇這兩個(gè)有很多相似又相互獨(dú)立的家伙是怎么被發(fā)明出來的呢？什么情況下得到的是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是因?yàn)槟承v史原因，在新一代DOM出現(xiàn)之前，實(shí)現(xiàn)HTMLCollection這個(gè)接口的集合只包含HTML元素，所以命名為HTMLCollection。

我們知道DOM節(jié)點(diǎn)（node）不光包含HTML元素，還包含text node（字符節(jié)點(diǎn)）和comment（注釋），既然HTMLCollection只包含HTML元素，那NodeList是不是會(huì)包含所有類型的DOM節(jié)點(diǎn)呢，我們來試驗(yàn)一下，先寫一段html：

    this is patent content
    

        this is child content
    
    

然后執(zhí)行：

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

打印結(jié)果：

我們看到childNodes返回的是第一個(gè)div下面的所有DOM節(jié)點(diǎn)，包含3個(gè)text node（其中兩個(gè)是換行符），一個(gè)子div，一個(gè)comment。這證實(shí)了我們對(duì)NodeList的猜想。

我們再看一下HTMLCollection，執(zhí)行：

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

打印結(jié)果：

只包含了子div，也驗(yàn)證了MDN上的說法。

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

因?yàn)閜arent即是一個(gè)Node對(duì)象（擁有childNodes屬性），又因?yàn)樗凶釉厮运质且粋€(gè)ParentNode對(duì)象（擁有children屬性）。

至此，我們對(duì)NodeList和HTMLCollection應(yīng)該有一個(gè)比較全面的認(rèn)識(shí)，總結(jié)一下就是HTMLCollection是比較早期的模型，只能包含HTML元素，早期就有的接口如document.getElementsByClassName, document.getElementsByTagName返回的就是HTMLCollection。NodeList是比較新的模型，相比HTMLCollection更加完善，不光有HTML元素，還有text節(jié)點(diǎn)和comment。比較新的接口如document.querySelectorAll返回的就是NodeList。

關(guān)于NodeList，HTMLCollection和Array的關(guān)系，就是長得像，有個(gè)別相似的功能，但是是完全不一樣的東西。

當(dāng)然關(guān)于HTMLCollection和NodeList的故事還沒有講完，因?yàn)樗鼈冇袝r(shí)候是live（活的？動(dòng)態(tài)的？），有時(shí)候是not live（死的？靜態(tài)的？），關(guān)于這個(gè)話題，之后的文章再詳細(xì)分析。