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 事件冒泡简介及应用
Jan 11 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
详解Python自建logging模块
2018/01/29 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python实现局域网内实时通信代码
2019/12/22 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
社区志愿者心得体会
2014/01/03 职场文书
减负增效提质方案
2014/05/23 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS