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 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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中require和include路径问题详解
2014/12/25 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python学习开发mock接口
2019/04/28 Python
通过python检测字符串的字母
2020/02/18 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
服装厂厂长职责
2013/12/16 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
保护环境建议书
2014/03/12 职场文书
小班上学期评语
2014/05/05 职场文书
家具商场的活动方案
2014/08/16 职场文书
老干部工作先进事迹
2014/08/17 职场文书
成都人事代理协议书
2014/10/25 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
早安问候语大全
2015/11/10 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
详解JVM系列之内存模型
2021/06/10 Javascript