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 相关文章推荐
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP单链表的实现代码
2016/07/05 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
深入探寻javascript定时器
2015/01/02 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Vue仿今日头条实例详解
2018/02/06 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python中的index()方法使用教程
2015/05/18 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
优秀求职信范文分享
2013/12/19 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
实习科室评语
2015/01/04 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
maven依赖的version声明控制方式
2022/01/18 Java/Android