摘要：唯一要注意的是返回的雖然是，但是實際上是元素集合，并且是靜態(tài)的其他接口返回的和都是的。與相同的是它也是一個動態(tài)的集合，與不同的是，中保存的是一組無序的屬性節(jié)點的集合。及以下版本瀏覽器中，注釋屬于算作因此會出現(xiàn)在里。而且是元素的集合。

主要有兩個方面不一樣
1.包含節(jié)點的類型
2.使用方法

1.包含節(jié)點的類型不同(重要)

(1)NodeList
一個節(jié)點的集合，既可以包含元素和其他節(jié)點(注釋節(jié)點、文本節(jié)點等)。
(2)HTMLCollection
元素集合, 只有Element

2.使用方法

相同點：
1）    它們都有l(wèi)ength屬性
2）    都有元素的getter，叫做item，可以傳入索引值取得元素。
3）    都是類數(shù)組
不同點：
HTMLCollection還有一個nameItem()方法，可以返回集合中name屬性和id屬性值的元素。（部分瀏覽器也支持NodeList的nameItem()方法）

涉及獲取元素的主要API
DOM最初設(shè)計是為了解析XML而設(shè)計的，之后沿用到HTML上。我們可以把DOM分為兩部分 core 和 html,Core 部分提供最基礎(chǔ)的 XML 解析API說明，HTML 部分專為 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中體現(xiàn)的，HTMLCollection則是在html部分，不同瀏覽器也會實現(xiàn)它們的不同接口。但是現(xiàn)在的dom標準已經(jīng)不分core和html了，反映的是瀏覽器的實現(xiàn)（）。唯一要注意的是 querySelectorAll 返回的雖然是 NodeList ，但是實際上是元素集合，并且是靜態(tài)的（其他接口返回的HTMLCollection和NodeList都是live的）。
DOM中的NodeList NamedNodeMap 及 HTMLCollection
把這三個放在一起說，是因為三者都是DOM中的array-like對象，即類數(shù)組對象（因而也都具有l(wèi)ength屬性）。
（1）先說NamedNodeMap這個對象，這個比較簡單，雖然翻譯過來是 命名的節(jié)點映射，但它只不過是 Attr這個對象的一個集合，Attr對象是DOM元素節(jié)點的屬性的對象表達。通過元素節(jié)點（element node）的attributes屬性返回的就是NamedNodeMap這個對象。與NodeList相同的是它也是一個動態(tài)的集合（live collection），與NodeList不同的是，NamedNodeMap中保存的是一組無序的屬性節(jié)點的集合。
（2）NodeList對象是由childNodes屬性，querySelectorAll方法返回的一組節(jié)點的集合，它保存著一組有序的節(jié)點。注意區(qū)別的是，由childNodes屬性返回的NodeList對象是一個動態(tài)的集合（live collection）， 而由querySelectorAll方法返回的則是一個靜態(tài)的集合（static collection）。因而在MDN中將他定義為 ”A sometimes-live collection“，live collection 指的是對對DOM的操作引起的的變化會實時的反映在這個集合里。
（3）接下來就是HTMLCollection,它在本質(zhì)是一個動態(tài)的NodeList對象。getElementsByTagName等方法返回的是包含零或多個元素的NodeList，在HTML文檔中，返回的則是HTMLCollection對象。因此說它在本質(zhì)上一個NodeList對象，包含一組有序（in document order基于文檔結(jié)構(gòu)順序）的動態(tài)集合。

在獲取原生DOM元素的時候，主要涉及這幾個DOM API（鏈接為Living Standard）：

?    Node及對應集合NodeList
?    Element（繼承Node）及對應集合HTMLCollection
?    Document(繼承Node)

注：計劃取代NodeList和HTMLCollection的Elements目前并無廣泛實現(xiàn)

基礎(chǔ)知識 -- NodeList v.s. HTMLCollection
使用Node Interface的方法，如childNodes，得到的通常是NodeList，而使用其他Interface的方法，又有可能得到HTMLCollection。所以有必要了解一下這兩者的區(qū)別。
關(guān)于這兩個類型的差異，在Stackoverflow上有一個不錯的問答。
其實，只要先看看Living Standard中這兩個類型的IDL，便能猜出大概了。NodeList的IDL如下：

interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable;
};

而HTMLCollection的IDL如下：

interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

相同點：
4） 都是類數(shù)組對象
5） 它們都有l(wèi)ength屬性
6）都有元素的getter，叫做item
不同點：
1.NodeList的元素是Node,HTMLCollection的元素是Element。

Element繼承自Node，是Node的一種，在HTML中，它一般是HTML元素（比如

之類的標簽創(chuàng)建出來的對象）。而Node作為父類，除了Element還有一些其他子類，比如HTML元素內(nèi)的文本對應的Text，文檔對應的Document，注釋對應的Comment。HTMLCollection里，只有Element，而NodeList里可以有Element、Text、Comment等多種元素。按說如果獲取元素返回的列表里只有Element，那這兩種類沒多大區(qū)別，但事實上很多時候瀏覽器會將解析HTML文本時得到的Text和Comment一并放進列表里放回。比如說下面這一段代碼

    
    
This is Some Text

若將這個div的子元素放在列表里返回，那么如果是作為NodeList返回，瀏覽器最多可以給這個列表5個元素（不同瀏覽器可能不同）

1.    一個
和注釋間的斷行和空格（或tab）作為text node（沒錯，標簽之間的空白符號也可以被解析為text node）
2.    注釋作為comment node
3.    注釋和
之間的斷行和空格（或tab）作為text node
4.    p作為element
5.    
和
之間的斷行和空格（或tab）作為text node

因此NodeList里可能會有很多一般DOM操作不需要的text node和comment node需要處理。而HTMLCollection則簡單多了，只有

這一個元素，這也是比較符合大多數(shù)人直覺的結(jié)果。
2.HTMLCollection還有一個namedItem方法，可以快速獲取其中元素。假設(shè)有這樣一段HTML：

 
This is Some Text

那么假設(shè)得到了這個div的子元素構(gòu)成的HTMLCollection，叫做list，那么使用list.namedItem("test")就可以直接得到里面的img元素。
查找順序參考Living Standard，但是在現(xiàn)實中不是所有瀏覽器都遵循標準。比如標準規(guī)定如果有多個擁有相同id或者name的元素，只要返回第一個，但chrome和opera會將它們放在一個HTMLCollection或者NodeList里一并返回，參見MDN。
從IDL看不出來的還有如下幾點

1.    這兩個類都是“l(fā)ive”的。對其中元素進行操作，會實時反映到DOM中（也因此如果一次性直接在這類列表上進行多個DOM操作的話，帶來的開銷會很大）。
2.    item和namedItem都可以通過[]的縮寫進行調(diào)用，有的瀏覽器還支持用()的縮寫進行調(diào)用（也就是可以list[index]，list[key]或者list(index)，list(key)），以及直接用dot notation調(diào)用namedItem（比如list.key）。
3.    部分瀏覽器支持對NodeList調(diào)用namedItem或間接通過[]、()、dot notation來調(diào)用namedItem，但由于各瀏覽器支持不同，最好不對NodeList做這種操作。
4.    IE8及以下版本瀏覽器中，注釋屬于HTMLCommentElement,算作Element,因此會出現(xiàn)在HTMLCollection里。

NodeList
　　NodeList是一個節(jié)點的集合(既可以包含元素和其他節(jié)點)，在DOM中，節(jié)點的類型總共有12種，通過判斷節(jié)點的nodeType來判斷節(jié)點的類型。
　　我們可以通過Node.childNodes和document.querySelectAll() (返回NodeList的接口有很多，這里不一一列舉，下同)來獲取到一個NodeList對象。
　　NodeList對象有個length屬性和item()方法，length表示所獲得的NodeList對象的節(jié)點個數(shù)，這里還是要強調(diào)的是節(jié)點，而item()可以傳入一個索引來訪問Nodelist中相應索引的元素。

1 
 2     

 3         文本節(jié)點
 4         
 5         node1
 6         node2
 7         node3
 8     
 9 
10 

　　上面的HTML代碼中，“文本節(jié)點”和父節(jié)點子節(jié)點的空格（連著的文本）算做一個文本節(jié)點，然后是一個注釋節(jié)點和注釋節(jié)點和元素節(jié)點之間的空格（換行會產(chǎn)生空格，空格算做文本節(jié)點）的文本節(jié)點，緊接著的是一個元素節(jié)點和元素節(jié)點之間的換行的文本節(jié)點，三個元素節(jié)點和元素節(jié)點間的兩個文本節(jié)點，最后是最后得元素節(jié)點和父元素之間的空格產(chǎn)生的文本節(jié)點，總共是9個節(jié)點。
　　NodeList對象的一大特點是它返回的內(nèi)容是動態(tài)的（live）,也就是說我們上面代碼獲取nodeLists是類似于“指針”的東西，所以在下面代碼中我們在獲取了nodeLists之后再向node中插入一個創(chuàng)建的span標簽后，發(fā)現(xiàn)獲取到了nodeLists.length變?yōu)?0了，但是querySelectorAll這個接口返回的nodeList對象比較特殊，它是個靜態(tài)（static）的對象。而且是元素的集合。

1 
 2     

 3         文本節(jié)點
 4         
 5         node1
 6         node2
 7         node3
 8     
 9 
10 

　　HTMLCollection
　　HTMLCollection是元素集合，它和NodeList很像，有l(wèi)ength屬性來表示HTMLCollection對象的長度，也可以通過elements.item()傳入元素索引來訪問。當時它還有一個nameItem()方法，可以返回集合中name屬性和id屬性值得元素。HTMLDocument 接口的許多屬性都是 HTMLCollection 對象，它提供了訪問諸如表單、圖像和鏈接等文檔元素的便捷方式，比如document.images和document.forms的屬性都是HTMLCollection對象。

 1 
 2     
 3     
 4     
 5     
 6     
 7     
 8 
 9 

　　HTMLCollection的集合和NodeList對象一樣也是動態(tài)的，他們獲取的都是節(jié)點或元素集合的一個引用。
　　HTMLCollection和NodeList的實時性非常有用，但是，我們有時要迭代一個NodeList或HTMLCollection對象的時候，我們通常會選擇生成當前對象的一個快照或靜態(tài)副本：
轉(zhuǎn)換為數(shù)組類型：
var staticLists = Array.prototype.slice.call(nodeListorHtmlCollection, 0)
　這樣的話，我們就可以放心的對當前的DOM集合做一些刪減和插入操作，這個在DOM密集操作的時候很有用。