问答详情
源自:9-14 删除节点removeChild()

为什么点击一次就一下子少了三个,然后再点击就是一个一个的呢

<body>

<div id="content">

  <h1>html</h1>

  <h1>php</h1>

  <h1>javascript</h1>

  <h1>jquery</h1>

  <h1>java</h1>

</div>


<script type="text/javascript">

function clearText() {

var content=document.getElementById("content");

for (var i=0;i<content.childNodes.length;i++){

 var childNode = content.childNodes[0]; 

 content.removeChild(childNode);

}

}

</script>


<button onclick="clearText()">清除节点内容</button>




</body>


提问者:qq_悠悠我心_4 2016-04-10 16:31

个回答

  • 沉默的程序员
    2016-04-10 19:26:35

    因为你在判断条件里面设置了i<content.childNodes.length,这样设置就会出现你说的这种问题,给你分析下,IE下执行,节点个数5个,当我点一次删除按钮。
    注意:5个节点分别对应下标是从0开始:
    i=0     content.childNodes.length=5      0<5  删除第一个节点后,继续循环
    i=1     content.childNodes.length=4      1<4   删除第二个节点后,继续循环
    i=2     content.childNodes.length=3      2<3   删除第三个节点后,继续循环
    i=3     content.childNodes.length=2      3<2  不成立,所以不继续。
    这也就是为什么你点击第一次就删除了三个节点原因。