JavaScript删除子节点的方法
2009-05-13 20:55
561 查看
HTML代码如下:
如果想删除f节点下的所有子节点,很自然也很正常想到的方法应该就是下面的这段代码了:
当程序运行后我们发现无论在FireFox还是在IE下,均不能完全的删除所有的子节点(FireFox中把空白区域也
当成节点,所以删除结点的结果会不一样的),这是因为当你把索引为0的子节点删除后那么很自然的原来索引
为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的。想正常的删除全部节点
的话,我们应该从后面往前删除,代码如下:
我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。
<div id="f"> <div>a</div> <div>b</div> <div>c</div> </div>
如果想删除f节点下的所有子节点,很自然也很正常想到的方法应该就是下面的这段代码了:
var f = document.getElementById("f"); var childs = f.childNodes; for(var i = 0; i < childs.length; i++) { alert(childs[i].nodeName); f.removeChild(childs[i]); }
当程序运行后我们发现无论在FireFox还是在IE下,均不能完全的删除所有的子节点(FireFox中把空白区域也
当成节点,所以删除结点的结果会不一样的),这是因为当你把索引为0的子节点删除后那么很自然的原来索引
为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的。想正常的删除全部节点
的话,我们应该从后面往前删除,代码如下:
for(var i = childs.length - 1; i >= 0; i--) { alert(childs[i].nodeName); f.removeChild(childs[i]); }
我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。
相关文章推荐
- Javascript removeChild()删除节点及删除子节点的方法
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
- JavaScript删除子节点的方法
- 删除javascript所创建子节点的方法
- JavaScript DOM概述(获取节点的方法/节点的访问关系/节点创建添加删除复制/属性获取设置删除)
- javascript :删除节点:用removeChild()方法从给定元素里删除一个子节点
- 删除javascript所创建子节点的方法
- Javascript removeChild()删除节点及删除子节点的方法
- javascript删除一个html元素节点的方法
- javascript删除一个html元素节点的方法
- javascript 原生方法对dom节点的操作,创建、添加、删除、替换、插入、复制、移动等操作
- JavaScript删除所有子节点的方法
- Javascript删除指定元素节点的方法
- 【JAVASCRIPT】使用ztree树,实现右键增加,修改,删除节点。带有复选框。
- JavaScript 中在光标处插入添加文本标签节点 详细方法
- javascript动态添加删除tabs标签的方法
- javascript删除元素节点
- JavaScript字符串删除重复字符的方法
- javascript动态添加、修改、删除对象的属性与方法详解
- javascript DOM 编程方法——创建节点