<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>節點集合 by 司徒正美 </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> window.onload = function(){ var d = document.createDocumentFragment(); var div = document.getElementById("aaa"); var c = div.childNodes; for(var i=0,n=c.length;i<n;i++){ alert(c[i] + " "+ i) d.appendChild(c[i]) } div.parentNode.replaceChild(d,div) } </script> </head> <body> <div id="aaa"> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
如果預先將nodeList轉換為數組就沒有問題！
複製代碼 代碼如下:
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)
}
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>節點集合 by 司徒正美 </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> 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) } </script> </head> <body> <div id="aaa"> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
很顯然nodeList還一些奇怪的特性是數組沒有的。從運行框2中，我們可以看到把節點appendChild到文檔片段時，其實會把它從DOM樹中剝離出來，nodeList一定是跟蹤這變化，動態改變了它自身，而直線遞加的i是無法對應正確的節點的索引！因此我們每次取得它的firstChild就行了。
複製代碼 代碼如下:
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) d.appendChild(c[0])//每次只取它第一個節點，直到取空
div.parentNode.replaceChild(d,div)
}
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>變態的childNodes by 司徒正美 </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> window.onload = function(){ var d = document.createDocumentFragment(); var div = document.getElementById("aaa"); var c = div.childNodes; while(c.length) d.appendChild(c[0])//每次只取它第一個節點，直到取空 div.parentNode.replaceChild(d,div) } </script> </head> <body> <div id="aaa"> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
順便一提，由getElementsByTagName取得的HTMLCollection也是這個樣子，因此處理這類節點集合要打起十二分精神了！
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title>HTMLCollection by 司徒正美 </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> window.onload = function(){ var d = document.createDocumentFragment(); var div = document.getElementById("aaa"); var c = document.getElementsByTagName("p") for(var i=0,n=c.length;i<n;i++){ alert(c[i] + " "+ i) d.appendChild(c[i]) } div.parentNode.replaceChild(d,div) } </script> </head> <body> <div id="aaa"> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
這兩種節點集合在各瀏覽器還實現得不太一樣，如標準瀏覽器我們可以用Array.prototype.slice.call將它們轉換為原生數組，IE則報錯。標準瀏覽器的它們有hasOwnProperty與valueOf，而IE是沒有的……
