i=contnet.childNodes.length-1和i=0;i<content.childNodes.length的区别

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

心为形役

2016-05-01 13:28

在写循环的时候

参考答案是:for(i=content.childNodes.length-1;i>=0;i--)

我写的是:for(i=0;i<content.childNodes.length;i++)

其他部分都一致,结果我的点击三次才能全部删除,参考答案写法一次就能实现,请问这个是有什么原因吗?

写回答 关注

2回答

  • wolf_wj
    2016-05-01 15:25:23
    已采纳

    在执行var x=removeChild(child[i])后,x后的节点会自动向前移,占据x节点的位置,导致位置发生变化(前移1),所以再次removeChild(child[i])的时候,会跳过一个节点。

    如:x,y,z    此时i=0,执行removeChild后,i=1,而节点数组变为:y,z;此时下次循环将删除z而不是y,从而导致y被遗漏。

    心为形役

    但是我还是不理解为什么参考答案里面的写法就不会有这个问题呢?

    2016-05-05 16:46:20

    共 2 条回复 >

  • kuban
    2016-05-01 15:25:33

    这个练习题正着删除倒着删除都能做,倒着删除相比不用考虑太多,正常写就好,因为总是从最后一个删除,正着删除的话需要从第一个删除,也就是

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

          var childNode=x.childNodes[0];//总从第一个删除

          x.removeChild(childNode);

      }

    如果按a=x.childNodes.length

    for(var i=0;i<a;i++){}这种写法,会漏删,导致一次删不干净。

    比如childNode读出来{h1,h2,h3,h4,h5}

    然后i=0,删了h1,没问题,继续

    i=1,此时childNode变成了{h2,h3,h4,h5},删除childNode[1],就是删除了h3

    这里就看出来了吧,会漏删,i=3的时候就没东西可删了,然后这次循环就结束了,但是还有h2,h4被漏下来了。

    同理,如果按for(var i=0;i<x.childNodes.length;i++)这种写法,i=3时,x.childNodes.length=2,退出循环了,也出现漏删了,所以会出现一次删不干净,需要多次删除的状况了



    心为形役

    谢谢你的耐心解答

    2016-05-16 22:32:56

    共 1 条回复 >

JavaScript进阶篇

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

468191 学习 · 21891 问题

查看课程

相似问题