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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
10款最好的Python开发编辑器
2019/07/03 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python的sys.path模块路径添加方式
2020/03/09 Python
django实现日志按日期分割
2020/05/21 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
工程负责人任命书
2014/06/06 职场文书
导游词之西递宏村
2019/12/10 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js