HTML代码如下:
- <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]);
- }
我们从索引最大值开始删除,采用递减的方法,这样索引便不会移动改变了。
分享到:
相关推荐
removeChild() 方法用来删除父节点的一个子节点。 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode[removed] ...
本文实例讲述了删除javascript所创建子节点的方法。分享给大家供大家参考。具体如下: js创建的节点,一时不知道如何删除。。。耗了一大堆时间 for(var i = 0; i < jsonList.length; i++ ){ var li_button = ...
在一些js框架,如Prototype中,可以用element.remove()来删除一个节点,核心JS中并 没有这样的方法,IE中有这样一个方法:removeNode(),尝试运行下面的代码 <div><input onclick="removeNode(this)" type="text...
删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 测试用例 <html> <head>
操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点。 function removeElement(_...
主要介绍了javascript删除一个html元素节点的方法,可通过获取父节点再查找并删除子节点来实现该功能,具有一定的参考借鉴价值,需要的朋友可以参考下
通过JavaScript可以删除所有节点,本文里主要讨论 removeChild 函数,大家可以看看下面的示例
15.3.1 父节点和子节点 15.3.2 兄弟节点 15.3.3 nodeName和nodeType属性 15.3.4 空白bug 15.4 遍历DOM 15.5 DOM查看器 15.6 查询DOM的快捷方式 15.6.1 document.getElement-...
这段代码先获得元素父节点,然后获得其父节点的所有子节点,然后删除自己便是所有兄弟节点 function sibling(elem){ var r=[]; var childs=elem[removed].childNodes; for(var i=0,len=childs.length;i<len;i...
5.3.html 获取元素的子节点。 5.4.html 改变div的内容。 5.5.html 获取表格第1行。 5.6.html 获取表格的某列。 5.7.html 修改表格的内容。 5.8.html 无刷新效果更改表格的某行。 第6章(\...
在火狐、谷歌和IE8以上浏览器中,空白也算是一个文本节点,但是在IE8和IE8以下浏览器中会忽略空白文本节点,具体可以参阅javascript如何获取元素的子节点和父节点 一章节。 代码实例: 实例一: <!DOCTYPE html> ...
objNextRootsiteText = objNextRootsite.childNodes.item(1).text '查找"NewList"的第一子节点的节点内容 xmlChildNode = objXml.documentElement.childNodes '获取当前节点 document.Write (xmlChildNode....
由于HTML文档被浏览器解析后就是一棵... 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。 在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.
如果删除没有子节点的节点就非常简单,如果节点只有一个子节点,不管是左子节点还是右子节点,就变得稍微有点复杂,如果节点包含两个子节点就最复杂。 如果待删除节点是叶子节点,那么只需要将从父节点指向它的链接...
12.4.3 回收空间--删除不用的节点 12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode...
具体包括:展开所有节点、收缩所有节点、节点选择、动态添加子节点到当前选择节点、动态添加子节点到指定id节点、添加含(不含)图标节点、动态删除当前选择节点、动态删除指定Id节点。 兼容IE6、IE7、FF3.x
在新窗口中选择父节点, 将移动整个子节点树到新的父节点下. 5. 上下移动: 点击上箭头和下箭头来移动当前节点. 6. 添加文档内容: 选中节点,点击"编辑", 即可实现文本输入. 可以改变选中的文本的大小,颜色,状态等. 7...
2.掌握Dom操作中的添加/删除子节点方法。 3.使用setTimeout设置定时器。 4.使用clearTimeout清除定时器以及事件代理的运用。 效果图: 1)实现删除分享内容功能 利用事件代理实现点击关闭按钮删除分享内容。 删除...