介紹
在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)