js便籤筆記（1）——說說HTMLCollection、NodeList以及NamedNodeMap

王福朋發表於2014-03-26
JS筆記HTML

介紹

在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）是不一樣的，兩者要分清楚，我會在以後的文章中專門講解。（補：http://www.cnblogs.com/wangfupeng1988/p/3631853.html）

所謂“動態”

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都會增加。

總結

1. 要了解 HTMLCollection、NodeList以及NamedNodeMap 三種集合型別；

2. 他們都是“類陣列”；

3. 知道他們的“動態性”，這個很重要；

4. 特性和屬性不同，後續會專門講解。  （補：http://www.cnblogs.com/wangfupeng1988/p/3631853.html）

相關文章