DOM是JavaScript重要组成部分，在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection(html元素的集合)。这三个集合有一些共同的特点：它们都可以通过中括号表达式来访问集合中元素，也有length属性。但它们并不是数组，而且它们都是动态的，会根据页面元素的变化而变化。下面就来介绍一下它们。
DOM将HTML页面解析成一个由多层次节点构成的结构。节点是页面结构的基础，而所有节点继承自Node类型，因此所有节点共享着基本的属性和方法。Node类型有一个childNodes属性，所以所有节点都拥有这个属性。而通过这个属性就可以得到一个保存着本节点的子节点组成的NodeList对象。
NodeList可以通过方括号表达式来访问，也可以通过item()方法来访问。”他“也有length属性，可以访问元素个数。虽然javascript中的数组可以修改length属性。但NodeList集合并不是数组，而且它是页面一片区域的DOM结构映射。所以请不要修改NodeList对象的length值。
var firstChild = someNode.childNodes[0];//获取第一个元素 var secondChild = someNode.childNodes.item(1);//获取第二个元素 var count = someNode.childNodes.length;//获取集合长度Element类型这种DOM节点是唯一拥有attributes属性的一种节点类型。而attribute属性中就包含NamedNodeMap集合。它由元素的特性组成。所以只要是元素节点，调用attributes属性就可以得到NamedNodeMap集合。
NamedNodeMap集合的元素拥有nodeName和nodeValue属性，分别表示元素特性名称和特性值，也拥有以下方法： 1>getNamedItem(name);返回nodeName属性等于name的节点； 2>removeNamedItem(name);从列表中移除nodeName节点； 3>setNamedItem(node);向列表中添加节点，以节点nodeName为属性索引； 4>item(pos);返回位于数字pos位置的节点。
var className = element.attributes.getNamedItem('class').nodeValue; var className1 = element.attributes['class'].nodeValue; var oldAttr = element.attributes.removeNamedItem('class');一般元素节点的getAttribute()、removeAttribute()和setAttribute()方法都可以完成以上操作。
HTMLCollection是元素节点的集合可以通过getElementsByTagName()方法(获取同类型的元素)、getElementsByName()方法(获取name特性相同的元素)、document的anchors属性(包含name特性的a元素），forms属性(包含文档所有form元素)，images属性(包含文档所有img元素)，links属性(文档所有带href特性的a元素)。
HTMLCollection集合操作方法和NodeList集合操作的方法相同，就不再重复了。这两个集合的区别是HTMLColletion中只有元素节点(nodeType=1),而NodeList集合可以拥有元素节点，文本节点(nodeType=3)，注释节点(nodeTypd=8)等。
这三个集合都是“动态的”；当文档结构发生变化时，它们都会更新，所以以下操作就会发生错误：
var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { var div = document.createElement('div'); document.body.appendChild(div); }以上代码中的for循环将会一直执行，因为div得到的HTMLCollection集合是动态的，当每次给body添加元素divs都会进行更新，所以会一直循环下去。
解决方法1：将初始的集合的length存起来
var divs = document.getElementsByTagName('div'); for (var i = 0, var len = divs.length; i < len; i++) { var div = document.createElement('div'); document.body.appendChild(div); }解决方法2：将以上集合转化为数组
var divs = document.getElementsByTagName('div'); //将HTMLCollection转换为数组(此方法在IE8及以前不能用) var divsArr = Array.prototype.slice.call(divs,0); for (var i = 0; i < divsArr.length; i++) { var div = document.createElement('div'); document.body.appendChild(div); }将以上集合转为数组的方法(通用):
function convertListToArray(nodes) { var array = null; try{//标准浏览器 array = Array.prototype.slice.call(nodes,0); }catch(ex){//IE8及以下遍历每一项分别添加到数组中 array = new Array(); for(var i = 0,len = nodes.length;i < len;i++){ array.push(nodes[i]); } } return array; }以上就是我对NodeList,NamedNodeMap和HTMLCollection集合的简单介绍，如有问题希望提出，感谢看到最后。
