快捷導(dǎo)航

javascript 變態(tài)的節(jié)點(diǎn)集合

更新時(shí)間：2010年03月28日 14:08:04 作者：

今天想實(shí)現(xiàn)jQuery的unwrap效果，換言之，就是用其孩子把其父節(jié)點(diǎn)干掉。為了效率，用到文檔碎片，而取孩子時(shí)使用到childNodes（返回一個(gè)nodeList）

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

如果預(yù)先將nodeList轉(zhuǎn)換為數(shù)組就沒(méi)有問(wèn)題！

 
window.onload = function(){ 
var d = document.createDocumentFragment(); 
var div = document.getElementById("aaa"); 
var c = div.childNodes; 
var arr = []; 
for(var i=0,n=c.length;i<n;i++){ 
arr.push(c[i]) 
} 
for(var i=0,n=arr.length;i<n;i++){ 
alert(arr[i] + " "+ i) 
d.appendChild(arr[i]) 
} 
div.parentNode.replaceChild(d,div) 
} 

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

很顯然nodeList還一些奇怪的特性是數(shù)組沒(méi)有的。從運(yùn)行框2中，我們可以看到把節(jié)點(diǎn)appendChild到文檔碎片時(shí)，其實(shí)會(huì)把它從DOM樹(shù)中剝離出來(lái)，nodeList一定是跟蹤這變化，動(dòng)態(tài)改變了它自身，而直線(xiàn)遞加的i是無(wú)法對(duì)應(yīng)正確的節(jié)點(diǎn)的索引！因此我們每次取得它的firstChild就行了。

復(fù)制代碼代碼如下:

 
window.onload = function(){ 
var d = document.createDocumentFragment(); 
var div = document.getElementById("aaa"); 
var c = div.childNodes; 
while(c.length) d.appendChild(c[0])//每次只取它第一個(gè)節(jié)點(diǎn)，直到取空 
div.parentNode.replaceChild(d,div) 
} 

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

順便一提，由getElementsByTagName取得的HTMLCollection也是這個(gè)樣子，因此處理這類(lèi)節(jié)點(diǎn)集合要打起十二分精神了！

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

這兩種節(jié)點(diǎn)集合在各瀏覽器還實(shí)現(xiàn)得不太一樣，如標(biāo)準(zhǔn)瀏覽器我們可以用Array.prototype.slice.call將它們轉(zhuǎn)換為原生數(shù)組，IE則報(bào)錯(cuò)。標(biāo)準(zhǔn)瀏覽器的它們有hasOwnProperty與valueOf，而IE是沒(méi)有的……

您可能感興趣的文章: