HTMLCollection与NodeList

NodeList v.s. HTMLCollection

主要有两个方面不一样
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<Node>;
};

而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元素（比如<p>之类的标签创建出来的对象）。而Node作为父类，除了Element还有一些其他子类，比如HTML元素内的文本对应的Text，文档对应的Document，注释对应的Comment。HTMLCollection里，只有Element，而NodeList里可以有Element、Text、Comment等多种元素。按说如果获取元素返回的列表里只有Element，那这两种类没多大区别，但事实上很多时候浏览器会将解析HTML文本时得到的Text和Comment一并放进列表里放回。比如说下面这一段代码

<div>
    <!-- Comment -->
    <p>This is Some Text</p>
</div>

若将这个div的子元素放在列表里返回，那么如果是作为NodeList返回，浏览器最多可以给这个列表5个元素（不同浏览器可能不同）

1.    一个<div>和注释间的断行和空格（或tab）作为text node（没错，标签之间的空白符号也可以被解析为text node）
2.    注释作为comment node
3.    注释和<p>之间的断行和空格（或tab）作为text node
4.    p作为element
5.    </p>和</div>之间的断行和空格（或tab）作为text node

因此NodeList里可能会有很多一般DOM操作不需要的text node和comment node需要处理。而HTMLCollection则简单多了，只有<p>这一个元素，这也是比较符合大多数人直觉的结果。
2.HTMLCollection还有一个namedItem方法，可以快速获取其中元素。假设有这样一段HTML：

<div>
 <!-- Comment -->
<p>This is Some Text</p>
<img name="test" src="test.jpg">
</div>

那么假设得到了这个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 <body>
 2     <div id="node">
 3         文本节点
 4         <!-- 注释节点 -->
 5         <span>node1</span>
 6         <span>node2</span>
 7         <span>node3</span>
 8     </div>
 9 </body>
10 <script>
11     var node = document.getElementById('node'),
12         nodeLists = node.childNodes
13     console.log(nodeLists.length) //     输出为9
14 </script>

　　上面的HTML代码中，“文本节点”和父节点子节点的空格（连着的文本）算做一个文本节点，然后是一个注释节点和注释节点和元素节点之间的空格（换行会产生空格，空格算做文本节点）的文本节点，紧接着的是一个元素节点和元素节点之间的换行的文本节点，三个元素节点和元素节点间的两个文本节点，最后是最后得元素节点和父元素之间的空格产生的文本节点，总共是9个节点。
　　NodeList对象的一大特点是它返回的内容是动态的（live）,也就是说我们上面代码获取nodeLists是类似于“指针”的东西，所以在下面代码中我们在获取了nodeLists之后再向node中插入一个创建的span标签后，发现获取到了nodeLists.length变为10了，但是querySelectorAll这个接口返回的nodeList对象比较特殊，它是个静态（static）的对象。而且是元素的集合。

1 <body>
 2     <div id="node">
 3         文本节点
 4         <!-- 注释节点 -->
 5         <span>node1</span>
 6         <span>node2</span>
 7         <span>node3</span>
 8     </div>
 9 </body>
10 <script>
11     var node = document.getElementById('node')
12     var nodeLists = node.childNodes
13     var queryNodes = node.querySelectorAll('span')
14     node.appendChild(document.createElement('span'))
15     console.log(nodeLists.length)  // 输出为10
16     console.log(queryNodes.length)  //输出为3
17 </script>

　　HTMLCollection
　　HTMLCollection是元素集合，它和NodeList很像，有length属性来表示HTMLCollection对象的长度，也可以通过elements.item()传入元素索引来访问。当时它还有一个nameItem()方法，可以返回集合中name属性和id属性值得元素。HTMLDocument 接口的许多属性都是 HTMLCollection 对象，它提供了访问诸如表单、图像和链接等文档元素的便捷方式，比如document.images和document.forms的属性都是HTMLCollection对象。

 1 <body>
 2     <img src="test.png" id="image1">
 3     <img src="test.png" id="image2">
 4     <img src="test.png" id="image3">
 5     <img src="test.png" id="image4">
 6     <img src="test.png" id="image5">
 7     <img src="test.png" id="image6">
 8 </body>
 9 <script>
10     console.log(document.images.namedItem('image1')) //<img src="test.png" id="image1">
11 </script>

　　HTMLCollection的集合和NodeList对象一样也是动态的，他们获取的都是节点或元素集合的一个引用。
　　HTMLCollection和NodeList的实时性非常有用，但是，我们有时要迭代一个NodeList或HTMLCollection对象的时候，我们通常会选择生成当前对象的一个快照或静态副本：
转换为数组类型：
var staticLists = Array.prototype.slice.call(nodeListorHtmlCollection, 0)
　这样的话，我们就可以放心的对当前的DOM集合做一些删减和插入操作，这个在DOM密集操作的时候很有用。