HTML代碼如下:

[xhtml] 
 
  1. <div id="f">  
  2.   <div>a</div>  
  3.   <div>b</div>  
  4.   <div>c</div>  
  5. </div>  


如果想刪除f節點下的所有子節點,很自然也很正常想到的方法應該就是下面的這段代碼了:

[javascript] 
 
  1. var f = document.getElementById("f");  
  2. var childs = f.childNodes;  
  3. for(var i = 0; i < childs.length; i++) {  
  4.     alert(childs[i].nodeName);  
  5.     f.removeChild(childs[i]);  
  6. }  


當程序運行後我們發現無論在FireFox還是在IE下,均不能完全的刪除所有的子節點(FireFox中把空白區域也
當成節點,所以刪除結點的結果會不一样的),這是因为當你把索引为0的子節點刪除後那麼很自然的原來索引
为1節點此時它的索引變成0了,而這時變量i已經變成1了,程序繼續走時就會刪除原先索引为2的現在为1的節點,這样程序運行的結果就是只刪除了一半的子節點,用for in遍曆結果也是一样的。想正常的刪除全部節點
的話,我們應該從後面往前刪除,代碼如下:

[javascript] view plaincopy
 
  1. for(var i = childs.length - 1; i >= 0; i--) {  
  2.     alert(childs[i].nodeName);  
  3.     f.removeChild(childs[i]);  
  4. }  


我們從索引最大值開始刪除,采用遞減的方法,這样索引便不會移動改變了。

 

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()