JavaScript 存在陷阱 删除某一区域所有节点

 更新时间:2010年05月10日 18:48:33   作者:  
实现功能:删除某一区域中所有节点。
比较简单的,例如:有一区域<div id="newbody" ></div>,现要求删除其中所有节点。相信很多人会这样写:
复制代码 代码如下:

var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = 0;index < controlinfo.length ;index++)
{
  divpanel.removeChild(controlinfo[index]);
}

咋一看,是啊,对啊,这样很正确啊,一个一个遍历,最后全部删除。但是,仔细想想,每当删除一个节点后,controlinfo.length就会变小,这样下去是不能全部删除的——存在Bug。那么该如何改进呢?已经很清楚了,既然从开头Start不行,那我们就从结尾Start,完全正确,如下:
复制代码 代码如下:

var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = controlinfo.length - 1;index >= 0 ;index--)
{
  divpanel.removeChild(controlinfo[index]);
}

调试,Very Good!

这种陷阱不只是在JavaScript中才会碰到,基本上所有的语言,如C#、Java等,我们都会碰到这样的问题,有时会因为这样的问题而浪费很多的时间。很早就已经知道了这个问题,不过总是太相信自己的记忆,而没有好好记录,现在特记录下来,警示自己,同时也与大家分享。

相关文章

  • 微信小程序中显示倒计时代码实例

    微信小程序中显示倒计时代码实例

    这篇文章主要介绍了微信小程序中显示倒计时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js实现添加删除表格(两种方法)

    js实现添加删除表格(两种方法)

    本篇文章主要介绍了js实现添加删除表格(两种方法)的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 微信小程序实现商品分类列表

    微信小程序实现商品分类列表

    这篇文章主要为大家详细介绍了微信小程序实现商品分类列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 微信小程序复选框实现多选一功能过程解析

    微信小程序复选框实现多选一功能过程解析

    这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Javascript Event(事件)的传播与冒泡

    Javascript Event(事件)的传播与冒泡

    本文主要介绍了Event(事件)的传播与冒泡。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS 实现导航栏悬停效果(续2)

    JS 实现导航栏悬停效果(续2)

    发现原来的方法还有是有几个问题:首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接,还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中
    2013-09-09
  • 深入解析js轮播插件核心代码的实现过程

    深入解析js轮播插件核心代码的实现过程

    这篇文章主要深度揭密了js轮播插件核心代码的实现过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS实现显示当前日期的实例代码

    JS实现显示当前日期的实例代码

    本文通过实例代码给大家介绍了js实现显示当前日期功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • 使用控制台破解百小度一个月只准改一次名字

    使用控制台破解百小度一个月只准改一次名字

    这篇文章主要介绍了使用控制台破解百小度一个月只准改一次名字的方法和代码,有需要的小伙伴可以参考下。
    2015-08-08
  • js 两数组去除重复数值的实例

    js 两数组去除重复数值的实例

    下面小编就为大家分享一篇js 两数组去除重复数值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12

最新评论