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 相关文章推荐
如何使用HTML5地理位置定位功能
Apr 27 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php基础知识:控制结构
2006/12/13 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue中props的使用详解
2018/06/15 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
对python中return和print的一些理解
2017/08/18 Python
python读取文本中的坐标方法
2018/10/14 Python
详解Python装饰器
2019/03/25 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
软件测试企业面试试卷
2016/07/13 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
四议两公开实施方案
2014/03/28 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
思想工作总结范文
2015/08/12 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
索尼ICF-5900W收音机测评
2022/04/24 无线电