【轉】 HTMLCollection和NodeList的區別

1 HTMLCollection類型

下面的每一個項目（以及它們指定的屬性）都返回 HTMLCollection(基類)或者它的派生類：
Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)

document.forms 是一個 HTMLCollection類型的值
document還有images, applets, links, forms, anchors也返回HTMLCollection類型

var links = document.getElementsByTagName('a');//links返回HTMLCollection集合

屬性Properties
length 只讀 表示集合的數量 The number of items in the collection.

方法Methods
HTMLCollection.item(index)
根據數字索引值返回對象
HTMLCollection.namedItem(name)
根據name或者id索引值返回對象

舉個例子：
在Dom中有個表單form元素，它的id是'myForm'
var elem1, elem2;

// document.forms is an HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // shows: "true"

elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // shows: "true"

注意
HTMLCollection 是「活」的；若是基本的文檔改變時，那些改變經過全部 HTMLCollection 對象會當即顯示出來。

2 NodeList類型

概述
NodeList對象是一個節點的集合,是由Node.childNodes and the querySelectorAll方法返回的.

屬性
length
NodeList對象中包含的節點個數.

方法
item ( idx )
返回NodeList對象中指定索引的節點,若是索引越界,則返回null.也能夠簡寫爲nodeList[idx].

描述
一個"live"集合

綜合：
document.getElementsByName返回NodeList集合
var elems = document.getElementsByName('f');
console.dir(elems)//NodeList[3]

document.getElementsByTagName 返回HTMLCollection集合
var links = document.getElementsByTagName('a')
console.dir(links)//HTMLCollection[102]

大多數狀況下,NodeList對象和HTMLCollection都是個live集合.意思是說,若是文檔中的節點樹發生變化,則已經存在的NodeList對象也可能會變化.

var links = document.getElementsByTagName('a');
// 假如如今links.length === 2.

document.body.appendChild( links[0].cloneNode(true) ); // 文檔中又添加了一個a.
// 則links這個NodeList對象也會改變.
// links.length === 3

但若是該集合是由document.querySelectorAll(或者Element.querySelectorAll)方法返回的, 則它是非live的(就算把頁面內的全部節點清空,links.length還等於2).

判斷集合是哪種的方法：
1 經過集合是否有namedItem這個方法判斷是屬於HTMLCollection集合 仍是NodeList集合
2 經過打壓其構造函數也能夠知道 links.constructor
3 經過Object.getPrototypeOf(links對象)

什麼NodeList對象沒有map和forEach方法?

NodeList對象在某些方面和數組很是類似,看上去能夠直接使用從Array.prototype上繼承的方法.然而,這是不能夠的.

JavaScript的繼承機制是基於原型的.數組元素之因此有一些數組方法( 好比forEach和map),是由於它的原型鏈上有這些方法,以下:

myArray --> Array.prototype --> Object.prototype --> null (想要獲取一個對象的原型鏈,能夠連續的調用Object.getPrototypeOf,直到原型鏈盡頭).

forEach, map這些方式實際上是 Array.prototype這個對象的方法.

和數組不同, NodeList的原型鏈是這樣的:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype只有一個item方法, 沒有Array.prototype上的那些方法, 因此NodeList對象用不了它們.

 

原文連接：http://kezhou.sinaapp.com/index.php/archives/40.html