NodeList

NodeList

概述

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

屬性

length

• NodeList對象中包含的節點個數.

方法

• item ( idx )

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

描述

一個"live"集合

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

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

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

什麼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對象用不了它們.

解決辦法

一個解決辦法就是把Array.prototype上的方法添加到NodeList.prototype上. 但是, 要注意擴展DOM對象的原型是很是危險的,尤爲是在舊版本的Internet Explorer(6，7，8)中

for(prop in Array.prototype){
  if(Array.prototype.hasOwnProperty(prop) && typeof(Array.prototype[prop]) === 'function')
    NodeList[prop] = Array.prototype[prop];}var links = document.getElementsByTagName('a');links.forEach(function(link){ //   在一些瀏覽器中會拋異常  link.style.color = '#0F0';});

不擴展DOM對象原型的解決辦法:

var forEach = Array.prototype.forEach;var links = document.getElementsByTagName('a');forEach.call(links, function(link){ // 未發現有瀏覽器不支持  link.style.color = '#0F0';});

例子

遍歷一個NodeList對象中的全部的節點可使用以下代碼:

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  // 能夠簡寫爲myNodeList[i].}

不要嘗試使用 for...in 或者 for each...in 來遍歷一個NodeList 對象中的元素, 由於NodeList對象中的length和item屬性也會被遍歷出來,這可能會致使你的腳本運行出錯,若是你把上述兩個屬性也當作DOM對象的話.