摘要：展開的屬性后發現，繼承于一個對象，而這個對象又繼承于對象。這證實了我們對的猜想。是比較新的模型，相比更加完善，不光有元素，還有節點和。關于，和的關系，就是長得像，有個別相似的功能，但是是完全不一樣的東西。

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

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

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

    
    
    
    


    

        div1
        

            div2
            

                div3
            
        
    

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

document.querySelectorAll("div")

打印結果

我們發現返回的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？），如圖：

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

打印結果：

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方法，而且擁有幾個特有的方法，主要都是用來遍歷和取值用的。

認識了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：

    this is patent content
    

        this is child content
    
    

然后執行：

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（死的？靜態的？），關于這個話題，之后的文章再詳細分析。