最近在看《javascript高级程序设计》的时候，看到了这样一句话：“理解nodelist和htmlcollection，是从整体上透彻理解dom的关键所在。”，所以觉得应该写一篇关于nodelist和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 11
htmlcollection的集合和nodelist对象一样也是动态的，他们获取的都是节点或元素集合的一个引用。
htmlcollection和nodelist 实时性 前面都说到了它们连个对象都不是历史文档状态的一个静态快照，而是实时性的，这个是一个非常令人惊讶的特性，它们能随着文档的改变而改变，这个是很值得我们注意的，我们在平常使用一些dom 接口来返回一些dom集合的时候，常常会忽视掉这些。
htmlcollection和nodelist的实时性非常有用，但是，我们有时要迭代一个nodelist或htmlcollection对象的时候，我们通常会选择生成当前对象的一个快照或静态副本：
1 var staticlists = array.prototype.slice.call(nodelistorhtmlcollection, 0)
这样的话，我们就可以放心的对当前的dom集合做一些删减和插入操作，这个在dom密集操作的时候很有用。
还有mdn上面提到了一个将nodelist转化为array的dom扩展原型的方法（在ie6/7中存在危险：http://perfectionkills.com/whats-wrong-with-extending-the-dom/）：
var arraymethods = object.getownpropertynames( array.prototype );arraymethods.foreach( attacharraymethodstonodelist );function attacharraymethodstonodelist(methodname){ if(methodname !== length) { nodelist.prototype[methodname] = array.prototype[methodname]; }};var divs = document.getelementsbytagname( 'div' );var firstdiv = divs[ 0 ];firstdiv.childnodes.foreach(function( divchild ){ divchild.parentnode.style.color = '#0f0';});
结语 dom最初设计是为了解析xml而设计的，之后沿用到html上。我们可以把dom分为两部分 core 和 html,core 部分提供最基础的 xml 解析api说明，html 部分专为 html 中的 dom 解析添加其特有的 api。nodelist接口是在core中体现的，htmlcollection则是在html部分，不同浏览器也会实现它们的不同接口，厂商联盟性质的规范组织出现会让这些更加规范，也不出现之前返回的是nodelist对象，但是却是静态的。
这篇文章很多思想都是自己在平时和网上了一些博客中了解到了，其中加了很多自己的组织和理解，目的在于梳理下一些比较深入的知识点，如果写的有疏漏和错误之处，还请指出。