为什么结果不对

来源:9-14 删除节点removeChild()

我叫张星星

2016-03-11 12:42

好奇怪,我这样写 var i=0;i<content.childNodes.length-1;i++,运行结果是,第一次点击按钮没反应,第二次点击,后三个删除,第三次点击,倒数第二个删除,第四次点击,才全部删完,为什么会这样

写回答 关注

1回答

  • LeingK
    2016-03-11 14:35:11

    建议弹出结果一下你就知道为什么是这样的了

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

            alert('i:'+i+';数组个数: '+content.childNodes.length+';'+content.childNodes[i])//添加测试原因

           var x=content.removeChild(content.childNodes[i]);

          x=null;

      }

    我一开始想都没想就这样写了,然后遇到了你的这种结果,

    我来解释一下发生这样的原因,

    首先,第一次点击没反应的原因是删除的是空白元素,

    因为除了ie,其他浏览器换行都算一个空白节点,

    第一次循环时,删除的是下标为0的节点,也就是第一个空白节点,然后i加1变成了2,

    第二次循环时,删除的是下标为1的节点,其实删除的还是空白节点,因为空白节点之前的h1标签的下标已经从1变成了0,因为第一次循环删除了第一个节点,剩下的节点也就往前移了一位,

    然后之后删除的都是空白节点,原理一样

    直到i的值达到一个数值,也就是等于length的程度,停止循环,然后由于每次循环length的长度都减1了,所以只循环了一半,恰好吧空白节点删除了,但是删除空白节点是看不到效果的,所以第一次点击没反应,

    之后的原因的点击都一样,只不过没有空白节点了,所以看到的就是你那种效果。。。。。

    建议:每次出现问题的时候都试着弹出结果,依次往前找原因。。。。


JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题