javascript 變態(tài)的節(jié)點集合
更新時間：2010年03月28日 14:08:04 作者：
今天想實現(xiàn)jQuery的unwrap效果，換言之，就是用其孩子把其父節(jié)點干掉。為了效率，用到文檔碎片，而取孩子時使用到childNodes（返回一個nodeList）
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
如果預先將nodeList轉(zhuǎn)換為數(shù)組就沒有問題！
復制代碼 代碼如下:
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需再刷新一下頁面才能執(zhí)行]
很顯然nodeList還一些奇怪的特性是數(shù)組沒有的。從運行框2中，我們可以看到把節(jié)點appendChild到文檔碎片時，其實會把它從DOM樹中剝離出來，nodeList一定是跟蹤這變化，動態(tài)改變了它自身，而直線遞加的i是無法對應正確的節(jié)點的索引！因此我們每次取得它的firstChild就行了。
復制代碼 代碼如下:
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) d.appendChild(c[0])//每次只取它第一個節(jié)點，直到取空
div.parentNode.replaceChild(d,div)
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
順便一提，由getElementsByTagName取得的HTMLCollection也是這個樣子，因此處理這類節(jié)點集合要打起十二分精神了！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這兩種節(jié)點集合在各瀏覽器還實現(xiàn)得不太一樣，如標準瀏覽器我們可以用Array.prototype.slice.call將它們轉(zhuǎn)換為原生數(shù)組，IE則報錯。標準瀏覽器的它們有hasOwnProperty與valueOf，而IE是沒有的……
相關文章
JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法
這篇文章主要介紹了JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法,實例分析了javascript實現(xiàn)查找功能的樣式及相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了javascript面向?qū)ο笾畉his關鍵詞用法分析,以實例形式分析了在不同場合下this使用中的特性及相關使用技巧,需要的朋友可以參考下2015-01-01
javascript之Partial Application學習
在數(shù)學中，一個函數(shù)是描述每個輸入值對應唯一輸出值的這種對應關系，符號為 f(x)。例如，表達式 f(x)=x2表示了一個函數(shù) f，其中每個輸入值x都與唯一輸出值x2相聯(lián)系2013-01-01
這篇文章主要給大家介紹了關于JavaScript的十大取整方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
本文為大家介紹下使用js仿新浪微博登陸郵箱提示效果，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對大家有所幫組2013-08-08
按鍵測試，支持像 Ctrl+Alt+Shift+T 的組合鍵
按鍵測試，支持像 Ctrl+Alt+Shift+T 的組合鍵...2006-10-10
JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景
在行走江湖的過程中,會出現(xiàn)很多性能優(yōu)化的問題來讓你手足無措,那么這篇文章主要給大家介紹了關于JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景,針對這兩個問題來為你答疑解惑,需要的朋友可以參考下2021-07-07
javascript中的window.location.search方法簡介
window.location.search方法是截取當前url中“?”后面的字符串，示例如下，感興趣的朋友可以參考下2013-09-09
用javascript實現(xiàn)分割提取頁面所需內(nèi)容
用javascript實現(xiàn)分割提取頁面所需內(nèi)容...2007-05-05
JavaScript字符串轉(zhuǎn)數(shù)字的多種方法總結(jié)
在 JavaScript 開發(fā)中,我們經(jīng)常需要將字符串轉(zhuǎn)換為數(shù)字,例如從輸入框獲取用戶輸入后進行數(shù)學計算,JavaScript 提供了多種方法來實現(xiàn)這一功能,如 parseInt、parseFloat、Number 等,本文將詳細介紹這些方法的使用方式、適用場景以及可能的坑,需要的朋友可以參考下2025-03-03