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

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

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

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

2.使用方法

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

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

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

?    Node及對(duì)應(yīng)集合NodeList
?    Element（繼承Node）及對(duì)應(yīng)集合HTMLCollection
?    Document(繼承Node)

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

基礎(chǔ)知識(shí) -- NodeList v.s. HTMLCollection
使用Node Interface的方法，如childNodes，得到的通常是NodeList，而使用其他Interface的方法，又有可能得到HTMLCollection。所以有必要了解一下這兩者的區(qū)別。
關(guān)于這兩個(gè)類型的差異，在Stackoverflow上有一個(gè)不錯(cuò)的問答。
其實(shí)，只要先看看Living Standard中這兩個(gè)類型的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);
};

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

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

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

    
    
This is Some Text

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

1.    一個(gè)
和注釋間的斷行和空格（或tab）作為text node（沒錯(cuò)，標(biāo)簽之間的空白符號(hào)也可以被解析為text node）
2.    注釋作為comment node
3.    注釋和
之間的斷行和空格（或tab）作為text node
4.    p作為element
5.    
和
之間的斷行和空格（或tab）作為text node

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

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

 
This is Some Text

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

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

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

1 
 2     

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

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

1 
 2     

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

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

 1 
 2     
 3     
 4     
 5     
 6     
 7     
 8 
 9 

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