javascript dom 中removeChild 的困惑

代码如下： 我想做的是为Node 写一个clearChildren() 的函数，作用就是将它的所有孩子清除，只留自己，以便重新添加新的节点
但是好像效果并不是想像的那样 ，孩子节点一个也没有去掉，alert(d.innerHTML); 依然能显示 出来，请高手讲解
//清空domOBJ 的所有子节点
Node.prototype.clearChildren = function() {
var children = this.childNodes;
 
for ( var i = 0; i < children.length; i++) {
var child = children[i];
 
while(child.hasChildNodes()){
child.clearChildren();
}
this.removeChild(child);
}
// alert(this);
// var par=this.parentNode;
// var clone_=this.cloneNode(false);
// par.replaceChild(clone_, this);
return this;
} 
function click_action() {
var d = document.getElementById("d");
 
var tab = document.getElementById("tab");
//d.removeChild(tab);//如果是这样，选获取d.tab 节点(而不是d.childNodes[i]方式)则可以
var d2 = document.getElementById("d2");  d.clearChildren();

alert(d.innerHTML);
 d2.appendChild(d);
 }<%@ page language="java" import="java.util.*;" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <script type="text/javascript" src="js/dom.js"> 
   </script>
<script type="text/javascript">
  
   </script>
</head> <body> <div id="d">
<table border="1" id="tab">
<tr>
<td>1</td>
<td>2<td>
</tr>
</table>
</div>
<form action="">
<input type="button" onclick="click_action()" value="click here">
</form>
<br>
<div id="d2"></div>
</body>
</html>

解决方案 »

  1.   

    Node.prototype.clearChildren = function() {
    没有node这个类型，所以这个方法无效想清除子节点，直接  obj.innerHTML="";就可以了
      

  2.   

    可以这么写：
      Element.prototype.clearChildren = function() {
        var children = this.childNodes;
        for (var i = children.length - 1; i >= 0; i--) {
          var child = children[i];
          while (child.hasChildNodes()) {
            child.clearChildren();
          }
          this.removeChild(child);
        }
        return this;
      }
      

  3.   

    一个不知成不成熟的想法，如果所有的浏览器都能遵循dom 标准 ，javascript 能像java  一样面向对像的特性多加利用，那客户端编程应该容易很多
      

  4.   

    好像IE 根本就不支持Node Element 对像，它提示没有这个对像
      

  5.   

    需要在<html>之前加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    ，就会有Element对象
      

  6.   

    像1楼说的innerHTML="";就可以了
    像这种清楚用removeChild反而不好
    可以参考我这里关于超空间的测试
      

  7.   

    类似8楼说的，删除一个后，后面的元素index发生变化。解决方法：可以使用逆序循环