js便签笔记（1）——说说HTMLCollection、NodeList以及NamedNodeMap

浏览数：32 / 时间：2015年06月09日

介绍

在js的dom操作中，除了常用的document、html**Element之外，还有三个集合对象，即HTMLCollection、NodeList以及NamedNodeMap。试看以下操作：

 1 var divs = document.getElementsByTagName("div");
 2 alert(divs instanceof HTMLCollection);        //true  （chrome中返回false，divs是NodeList对象）
 3 
 4 var div = document.getElementById("div1");
 5 
 6 var children = div.childNodes;         //获取div元素子节点集合
 7 alert(children instanceof NodeList);   //true
 8 
 9 var attrs = div.attributes;            //获取div元素的特性
10 alert(children instanceof NamedNodeMap);  //true

以上代码中，chrome下的document.getElementsByTagName("div")将返回NodeList对象。

这三个对象都是“类数组”，可以获取他们的length，也可以通过 attrs[0] 获取数据，有点类似与函数里面的arguments。

NamedNodeMap和Attr

div.attrbutes将返回一个NamedNodeMap对象，即NamedNodeMap存储是的div的“特性Attribute”集合。而集合中的每一个元素，都是Attr类型的对象。Attr对象有三个属性，name、value和specified。

但是在日常应用中，一般会应用getAttribute()、setAttribute()和romoveAttribute()来操作特性，不需要直接访问特性对象。

另外，dom元素的“特性”（Attribute）和“属性”（property）是不一样的，两者要分清楚，我会在以后的文章中专门讲解。

所谓“动态”

HTMLCollection、NodeList以及NamedNodeMap这三个集合都是“动态的”，每当文档发生变化时，他们都会更新。他们将始终保持这最新、最准确的消息。且看以下程序：

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

以上代码是个死循环！

为何？就因为divs是通过getElementsByTagName()获取的htmlCollection集合，它是“动态”的。每次执行document.body.appendChild(div)时候，divs.length都会增加。