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

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

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

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

2.使用方法

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

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

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

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

注：計劃取代NodeList和HTMLCollection的Elements目前并無廣泛實現

基礎知識 -- NodeList v.s. HTMLCollection
使用Node Interface的方法，如childNodes，得到的通常是NodeList，而使用其他Interface的方法，又有可能得到HTMLCollection。所以有必要了解一下這兩者的區別。
關于這兩個類型的差異，在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） 都是類數組對象
5） 它們都有length屬性
6）都有元素的getter，叫做item
不同點：
1.NodeList的元素是Node,HTMLCollection的元素是Element。

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

之類的標簽創建出來的對象）。而Node作為父類，除了Element還有一些其他子類，比如HTML元素內的文本對應的Text，文檔對應的Document，注釋對應的Comment。HTMLCollection里，只有Element，而NodeList里可以有Element、Text、Comment等多種元素。按說如果獲取元素返回的列表里只有Element，那這兩種類沒多大區別，但事實上很多時候瀏覽器會將解析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則簡單多了，只有

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

 
This is Some Text

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

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

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

1 
 2     

 3         文本節點
 4         
 5         node1
 6         node2
 7         node3
 8     
 9 
10 

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

1 
 2     

 3         文本節點
 4         
 5         node1
 6         node2
 7         node3
 8     
 9 
10 

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

 1 
 2     
 3     
 4     
 5     
 6     
 7     
 8 
 9 

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