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密集操做的时候颇有用。