JavaScript NodeList和Array

原文引用腳本之家作者:Jeff Wong,謝謝大神提供資源

 

 

在Web前端編程中，我們通常會通過document.getElementsByTagName或者document.getElementsByClassName的方法取出一組相同標簽的dom元素。如下

 
var anchors = document.getElementsByTagName("a"); 
for (i = 0; i < anchors.length; i++) { 
var ele=anchors[i];//取某一個元素 
//some code here 
} 

 

上面的代碼表示獲取文檔中的所有鏈接元素，然后遍歷做一些事情。 
也許你會問，通過這種方法獲取的這一組dom元素不就是一個數組嗎？你看，你都可以直接獲取它的length屬性，還可以根據索引取到對應的單獨元素，根據大牛的著名鴨子理論，它像鴨子一樣行走（有length屬性），像鴨子一樣叫喚（根據索引取值），那么它就是一只鴨子。結論不言自明了吧？ 
如果，你已經對javascript稍微有過深入的了解，有length屬性，可以索引取值，一定是數組嗎，好像arguments也會這么一手吧，arguments是數組？雖然在實際開發的時候，我們把它當做普通數組來操作，length和for循環使用的不亦樂乎，而且並不見得會出錯。 
但是，它真的不是數組（Array），而是NodeList。NodeList不是數組。 
What a surprise，right？ 

1、NodeList為什么不是數組？ 

　　驗證NodeList是不是數組，最直接的方法也許是試一下Array專有的push和pop大法： 

　　

 
var anchors = document.getElementsByTagName("a"); 
var newEle = document.createElement("a");//新建一個a元素 
anchors.push(newEle);//push 
var element= anchors.pop();//pop 

您可以自己測試一下，上面的代碼不管是push還是pop方法，無一例外的會提示你沒有push或者pop方法。還有疑問嗎？這樣就結束了嗎？這種片面的測試反倒使樓豬無法高枕無憂心安理得了。我們完全可以像證明arguments不是數組一樣，也用同樣的方法證明NodeList不是數組。看下面的代碼吧： 

 
Array.prototype.testNodeList = "test nodelist"; //數組添加原型屬性 
function funcNodeList() { 
var links = document.getElementsByTagName("a"); 
alert(links.testNodeList); 
} 
function test() { 
alert(new Array().testNodeList); //test nodelist 
funcNodeList(); //#ff0000? what the hell is that? 
} 
test(); //測試一下 

通過上面的分析，我們可以肯定NodeList不是數組（Array）了。那么如何按照我們操作集合的習慣操作NodeList呢？ 

2、像操作Array一樣操作NodeList 

既然NodeList有length，可以for循環索引取值，轉換成數組還不是輕而易舉？哈哈，最直接的思路是這樣的:

 

 
var arr = new Array(); 
var anchors = document.getElementsByTagName("a") 
for (var i = 0; i < anchors.length; i++) { 
var ele = anchors[i]; 
arr.push(ele); //arr就是我們要的數組 
} 

明扼要說明一下吧：先new一個Array，遍歷NodeList，然后將每一個單獨的元素push到數組變量里，最后操作數組變量，over。有沒有智商受辱的感覺？ 
上面不是跟您開玩笑，因為下面是樓豬在網上google到的，兩行代碼就可以將NodeList轉換成Array來使用了： 

 
var anchors = document.getElementsByTagName("a"); 
var arr = Array.prototype.slice.call(anchors); //非ie瀏覽器正常 

但是，最最遺憾的事情發生了：上面的代碼在萬惡的IE下不能正常工作，IE會給你提示: 缺少 JScript 對象。 
你可能會對上面的一大段分析不屑一顧，認為沒有必要將NodeList轉換成Array來操作。其實，樓豬個人也認為，不管在哪種編程語言里，類型轉換都是非常不明智的行為。最常見的比如c#里的裝箱和拆箱，數值型數據轉換，有性能問題，一不小心還會觸雷。但是為什么樓豬單獨要把NodeList當做Array來處理呢？因為動態改變NodeList的時候，直接操作NodeList很可能會誤闖禁區而渾然不覺。下面舉個例子： 
（1）、html文檔片段 

<div id="divAnchor"> 
<a href="http://www.cnblogs.com/jeffwongishandsome/">link test</a> 
</div> 
（2）、javascript測試代碼 

 
var anchors = document.getElementsByTagName("a"); 
for (i = 0; i < anchors.length; i++) { 
var ele= document.createElement("a"); 
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/"); 
ele.appendChild(document.createTextNode("new link test")); 
document.getElementById("divAnchor").appendChild(ele); //div附加一個新鏈接 
} 

在文檔加載結束后，執行上面的腳本。我們的本意是在div內，已經存在的a元素后再附加一個a元素。但是，您可以運行一下，瀏覽器crash掉了吧？樓豬這里IE直接掛掉，FF提示腳本正忙，是否停止腳本運行，點擊停止后，頁面內已經生成了n多個a鏈接。其實我們可以大膽分析出原因來：for循環NodeList（前提：for循環內部添加了新的元素使nodelist長度發生了變化。感謝陳童鞋超群的建議），它的length會不斷變化上升，循環循環再循環，最后成了個死循環。而用下面的代碼，和我們預期的效果是一樣一樣的： 

 
var links = document.getElementsByTagName("a"); 
var anchors = null; //數組 
try { 
anchors = Array.prototype.slice.call(links); 
} 
catch (e) { //兼容ie 
anchors = new Array(); 
for (var i = 0; i < links.length; i++) { 
anchors.push(links[i]); 
} 
} 
for (i = 0; i < anchors.length; i++) { //數組循環 安全多了 
var ele = document.createElement("a"); 
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/"); 
ele.appendChild(document.createTextNode("new link test")); 
document.getElementById("divAnchor").appendChild(ele); //div附加一個新鏈接 
} 

那么你可能會問，不轉換不行嗎？沒有那么死板，當然是可以的，只要對我們平時熟悉的編碼習慣稍微動點小手術就可以了： 

 
var anchors = document.getElementsByTagName("a"); 
var len = anchors.length; //定義一個變量 
for (i = 0; i < len; i++) { //對局部變量len進行循環 
var ele = document.createElement("a"); 
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/"); 
ele.appendChild(document.createTextNode("new link test")); 
document.getElementById("divAnchor").appendChild(ele); //div附加一個新鏈接 
} 

到這里，不管有無疑問，實際編程如何取舍，樓豬都要感謝您的閱讀了。期待指點。