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以JSON方式提交数据到服务端示例代码
May 05 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
Ejb技术面试题
2015/04/29 面试题
兰兰过桥教学反思
2014/02/08 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
2014年教研工作总结
2014/12/06 职场文书
医院营销工作计划
2015/01/16 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
python使用pymysql模块操作MySQL
2021/06/16 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS