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可配置循环左右滚动例子
Sep 09 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
React实现轮播效果
Aug 25 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
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
对numpy数据写入文件的方法讲解
2018/07/09 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python递归下载文件夹下所有文件
2019/08/31 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
建筑专业自我鉴定
2013/10/22 职场文书
教师演讲稿范文
2014/01/08 职场文书
服务生自我鉴定
2014/01/22 职场文书
创建青年文明号材料
2014/05/09 职场文书
找工作求职信
2014/07/07 职场文书
护理医院见习报告
2014/11/03 职场文书
个人事迹材料范文
2014/12/29 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
公司处罚决定书
2015/06/24 职场文书
2015最新民情日记范文
2015/06/26 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python