javascript 變態的節點集合

2024-05-06 14:10:47

字體：大中小

來源：轉載

供稿：網友

[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)
}

[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>              </SPAN>
</div>
</div>
<div   id="wevfped"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="rsntdhr"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1043620.html'>Jquery 1.42 checkbox 全選和反選代碼</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1043622.html'>EXTJS內使用ACTIVEX控件引起崩潰問題的解決方法</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="hupvmsr"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流