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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
Js实现自定义右键行为
Mar 26 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
vue-cli 如何打包上线的方法示例
May 08 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 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
php中常用的预定义变量小结
2012/05/09 PHP
php错误日志简单配置方法
2016/07/11 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python实现kmp算法的实例代码
2019/04/03 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
如何用Python绘制3D柱形图
2020/09/16 Python
pandas按条件筛选数据的实现
2021/02/20 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
介绍一下常见的木马种类
2014/11/15 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
大学新闻系求职信
2014/06/03 职场文书
敬老院标语
2014/06/27 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
歌咏比赛主持词
2015/06/29 职场文书
python中的sys模块和os模块
2022/03/20 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android