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 document.referrer 用法
Apr 30 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
微信小程序排坑指南详解
May 23 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
Use Word to Search for Files
2007/06/15 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
Python中的模块和包概念介绍
2015/04/13 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
ipython和python区别详解
2019/06/26 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python的range和linspace使用详解
2019/11/27 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
怎样写演讲稿
2014/01/04 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书