DOM中的NodeList NamedNodeMap 及 HTMLCollection

  把这三个放在一起说，是因为三者都是DOM中的array-like对象，即类数组对象（因而也都具有length属性）。

  先说NamedNodeMap这个对象，这个比较简单，虽然翻译过来是 命名的节点映射，但它只不过是 Attr这个对象的一个集合，Attr对象是DOM元素节点的属性的对象表达。通过元素节点（element node）的attributes属性返回的就是NamedNodeMap这个对象。与NodeList相同的是它也是一个动态的集合（live collection），与NodeList不同的是，NamedNodeMap中保存的是一组无序的属性节点的集合。

  NodeList对象是由childNodes属性，querySelectorAll方法返回的一组节点的集合，它保存着一组有序的节点。注意区别的是，由childNodes属性返回的NodeList对象是一个动态的集合（live collection）， 而由querySelectorAll方法返回的则是一个静态的集合（static collection）。因而在MDN中将他定义为 ”A sometimes-live collection“，live collection 指的是对对DOM的操作引起的的变化会实时的反映在这个集合里。

  接下来就是HTMLCollection,它在本质是一个动态的NodeList对象。getElementsByTagName等方法返回的是包含零或多个元素的NodeList，在HTML文档中，返回的则是HTMLCollection对象。因此说它在本质上一个NodeList对象，包含一组有序（in document order基于文档结构顺序）的动态集合。

  建议不熟悉的小伙伴都熟读一下《JavaScript高级程序设计》 中的10.2.4使用NodeList这一小节。对性能优化，对更好的理解DOM都非常重要。

下面附上这一小节中的示例代码：

下列代码会导致无限循环：

var divs = document.getElementsByTagName(“div”),
 i,
 div;
for (i=0; i < divs.length; i++){
 div = document.createElement(”div”);
 document.body.appendChild(div);
}

下面这个代码则不会：

var divs = document.getElementsByTagName(“div”),
 i,
 len,
 div;
for (i=0, len=divs.length; i < len; i++){
 div = document.createElement(”div”);
 document.body.appendChild(div);
}

 

  最后以这一小节的最后一句话结尾：

  通常来说，我们应该尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一次基于文档的查询。所以，可以考虑将从NodeList中取得的值缓存起来。

（ Generally speaking, it is best to limit the number of times you interact with a NodeList. Since a query is run against the document each time, try to cache frequently used values retrieved from a NodeList. ）

 

NamedNodeMap 参考 https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap

NodeList 参考 https://developer.mozilla.org/en-US/docs/Web/API/NodeList

HTMLCollection 参考 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

《JavaScript高级程序设计》