NodeList,NamedNodeMap和HTMLCollection

  DOM是JavaScript重要组成部分，在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection(html元素的集合)。这三个集合有一些共同的特点：它们都可以通过中括号表达式来访问集合中元素，也有length属性。但它们并不是数组，而且它们都是动态的，会根据页面元素的变化而变化。下面就来介绍一下它们。

NodeList集合

1.如何获取NodeList集合

  DOM将HTML页面解析成一个由多层次节点构成的结构。节点是页面结构的基础，而所有节点继承自Node类型，因此所有节点共享着基本的属性和方法。Node类型有一个childNodes属性，所以所有节点都拥有这个属性。而通过这个属性就可以得到一个保存着本节点的子节点组成的NodeList对象。

2.如何操作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;//获取集合长度

NamedNodeMap

1.如何获取NamedNodeMap

  Element类型这种DOM节点是唯一拥有attributes属性的一种节点类型。而attribute属性中就包含NamedNodeMap集合。它由元素的特性组成。所以只要是元素节点，调用attributes属性就可以得到NamedNodeMap集合。

2.如何操作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

1.如何得到HTMLCollection集合

  HTMLCollection是元素节点的集合可以通过getElementsByTagName()方法(获取同类型的元素)、getElementsByName()方法(获取name特性相同的元素)、document的anchors属性(包含name特性的a元素），forms属性(包含文档所有form元素)，images属性(包含文档所有img元素)，links属性(文档所有带href特性的a元素)。

2.与NodeList区别

  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集合的简单介绍，如有问题希望提出，感谢看到最后。