JavaScript删除子节点的方法
2013-04-06 17:03
288 查看
HTML代码如下:
如果想删除f节点下的所有子节点,很自然也很正常想到的方法应该就是下面的这段代码了:
当程序运行后我们发现无论在FireFox还是在IE下,均不能完全的删除所有的子节点(FireFox中把空白区域也当成节点,所以删除结点的结果会不一样的),这是因为当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的。想正常的删除全部节点的话,我们应该从后面往前删除,代码如下:
我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。
<div id="f"> <div>a</div> <div>a</div> <div>a</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操作DOM节点元素的常用方法(创建/删除/替换/复制等)
- javascript :删除节点:用removeChild()方法从给定元素里删除一个子节点
- Javascript删除指定元素节点的方法
- Javascript removeChild()删除节点及删除子节点的方法
- javascript删除一个html元素节点的方法
- 删除javascript所创建子节点的方法
- javascript删除一个html元素节点的方法
- JavaScript删除子节点的方法
- javascript复习第二天删除元素节点
- JavaScript节点操作DOMDocument属性和方法
- javascript中节点的最近的相关节点访问方法
- asp.net treeview控件无刷新选择和删除节点的ajax方法
- c++中List在遍历时删除节点的方法(转载)
- JavaScript可以动态添加、删除对象属性与方法
- JavaScript中访问节点对象的方法有哪些如何使用