|
|
復(fù)制代碼 代碼如下:
var anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++) {
var ele=anchors[i];//取某一個(gè)元素
//some code here
}
上面的代碼表示獲取文檔中的所有鏈接元素，然后遍歷做一些事情。
也許你會(huì)問，通過這種方法獲取的這一組dom元素不就是一個(gè)數(shù)組嗎？你看，你都可以直接獲取它的length屬性，還可以根據(jù)索引取到對(duì)應(yīng)的單獨(dú)元素，根據(jù)大牛的著名鴨子理論，它像鴨子一樣行走（有l(wèi)ength屬性），像鴨子一樣叫喚（根據(jù)索引取值），那么它就是一只鴨子。結(jié)論不言自明了吧？
如果，你已經(jīng)對(duì)Javascript稍微有過深入的了解，有l(wèi)ength屬性，可以索引取值，一定是數(shù)組嗎，好像arguments也會(huì)這么一手吧，arguments是數(shù)組？雖然在實(shí)際開發(fā)的時(shí)候，我們把它當(dāng)做普通數(shù)組來操作，length和for循環(huán)使用的不亦樂乎，而且并不見得會(huì)出錯(cuò)。
但是，它真的不是數(shù)組（Array），而是NodeList。NodeList不是數(shù)組。
What a surprise，right？
1、NodeList為什么不是數(shù)組？
驗(yàn)證NodeList是不是數(shù)組，最直接的方法也許是試一下Array專有的push和pop大法：
復(fù)制代碼 代碼如下:
var anchors = document.getElementsByTagName("a");
var newEle = document.createElement("a");//新建一個(gè)a元素
anchors.push(newEle);//push
var element= anchors.pop();//pop
您可以自己測(cè)試一下，上面的代碼不管是push還是pop方法，無一例外的會(huì)提示你沒有push或者pop方法。還有疑問嗎？這樣就結(jié)束了嗎？這種片面的測(cè)試反倒使樓豬無法高枕無憂心安理得了。我們完全可以像證明arguments不是數(shù)組一樣，也用同樣的方法證明NodeList不是數(shù)組。看下面的代碼吧：
復(fù)制代碼 代碼如下:
Array.prototype.testNodeList = "test nodelist"; //數(shù)組添加原型屬性
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(); //測(cè)試一下
通過上面的分析，我們可以肯定NodeList不是數(shù)組（Array）了。那么如何按照我們操作集合的習(xí)慣操作NodeList呢？
2、像操作Array一樣操作NodeList
既然NodeList有l(wèi)ength，可以for循環(huán)索引取值，轉(zhuǎn)換成數(shù)組還不是輕而易舉？哈哈，最直接的思路是這樣的：g
復(fù)制代碼 代碼如下:
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就是我們要的數(shù)組
}
明扼要說明一下吧：先new一個(gè)Array，遍歷NodeList，然后將每一個(gè)單獨(dú)的元素push到數(shù)組變量里，最后操作數(shù)組變量，over。有沒有智商受辱的感覺？
上面不是跟您開玩笑，因?yàn)橄旅媸菢秦i在網(wǎng)上google到的，兩行代碼就可以將NodeList轉(zhuǎn)換成Array來使用了：
復(fù)制代碼 代碼如下:
var anchors = document.getElementsByTagName("a");
var arr = Array.prototype.slice.call(anchors); //非ie瀏覽器正常
但是，最最遺憾的事情發(fā)生了：上面的代碼在萬惡的IE下不能正常工作，IE會(huì)給你提示: 缺少 JScript 對(duì)象。
你可能會(huì)對(duì)上面的一大段分析不屑一顧，認(rèn)為沒有必要將NodeList轉(zhuǎn)換成Array來操作。其實(shí)，樓豬個(gè)人也認(rèn)為，不管在哪種編程語言里，類型轉(zhuǎn)換都是非常不明智的行為。最常見的比如c#里的裝箱和拆箱，數(shù)值型數(shù)據(jù)轉(zhuǎn)換，有性能問題，一不小心還會(huì)觸雷。但是為什么樓豬單獨(dú)要把NodeList當(dāng)做Array來處理呢？因?yàn)閯?dòng)態(tài)改變NodeList的時(shí)候，直接操作NodeList很可能會(huì)誤闖禁區(qū)而渾然不覺。下面舉個(gè)例子：
（1）、html文檔片段
<div id="divAnchor">
<a >link test</a>
</div>
（2）、Javascript測(cè)試代碼
復(fù)制代碼 代碼如下:
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附加一個(gè)新鏈接
}
在文檔加載結(jié)束后，執(zhí)行上面的腳本。我們的本意是在div內(nèi)，已經(jīng)存在的a元素后再附加一個(gè)a元素。但是，您可以運(yùn)行一下，瀏覽器crash掉了吧？樓豬這里IE直接掛掉，F(xiàn)F提示腳本正忙，是否停止腳本運(yùn)行，點(diǎn)擊停止后，頁面內(nèi)已經(jīng)生成了n多個(gè)a鏈接。其實(shí)我們可以大膽分析出原因來：for循環(huán)NodeList（前提：for循環(huán)內(nèi)部添加了新的元素使nodelist長(zhǎng)度發(fā)生了變化。感謝陳童鞋超群的建議），它的length會(huì)不斷變化上升，循環(huán)循環(huán)再循環(huán)，最后成了個(gè)死循環(huán)。而用下面的代碼，和我們預(yù)期的效果是一樣一樣的：
復(fù)制代碼 代碼如下:
var links = document.getElementsByTagName("a");
var anchors = null; //數(shù)組
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++) { //數(shù)組循環(huán) 安全多了
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附加一個(gè)新鏈接
}
那么你可能會(huì)問，不轉(zhuǎn)換不行嗎？沒有那么死板，當(dāng)然是可以的，只要對(duì)我們平時(shí)熟悉的編碼習(xí)慣稍微動(dòng)點(diǎn)小手術(shù)就可以了：
復(fù)制代碼 代碼如下:
var anchors = document.getElementsByTagName("a");
var len = anchors.length; //定義一個(gè)變量
for (i = 0; i < len; i++) { //對(duì)局部變量len進(jìn)行循環(huán)
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附加一個(gè)新鏈接
}
到這里，不管有無疑問，實(shí)際編程如何取舍，樓豬都要感謝您的閱讀了。期待指點(diǎn)。
者：Jeff Wong
JavaScript技術(shù)：在javascript將NodeList作為Array數(shù)組處理的方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
