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


Posted in Javascript onMay 10, 2010

比较简单的,例如:有一区域<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等,我们都会碰到这样的问题,有时会因为这样的问题而浪费很多的时间。很早就已经知道了这个问题,不过总是太相信自己的记忆,而没有好好记录,现在特记录下来,警示自己,同时也与大家分享。

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
js 小数取整的函数
May 10 #Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 #Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 #Javascript
JavaScript几种形式的树结构菜单
May 10 #Javascript
js function使用心得
May 10 #Javascript
javascript 模式设计之工厂模式详细说明
May 10 #Javascript
javascript 精粹笔记
May 09 #Javascript
You might like
第三章 php操作符与控制结构代码
2011/12/30 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python多进程原理与用法分析
2018/08/21 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
关于numpy数组轴的使用详解
2019/12/05 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
2014年政工师工作总结
2014/12/18 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
中班上学期个人总结
2015/02/12 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
python自动化测试通过日志3分钟定位bug
2021/11/20 Python