JavaScript中删除节点的两种操作方法

原创 2012年03月23日 11:51:19

在javaScript的运用中,我们经常需要对某个节点进行删除操作, 对于节点的增加(appendChid/insertBefore),删除(removeChild),替换(replaceChid)等操作最关键的地方,我觉得应该是找准他们的父节点,以及要操作的子节点.这样就会思路清晰的进行各种花样的操作.接下来,我主要总结一下,我在运用中删除节点的操作方法;

第一种方法,通过访问节点的getElementsByTagName()方法返回的集合结果集来操作删除.代码如下(代码只附body部分):

<body>
<div id="div1">
<h2 id="p3">我是h2元素的内容</h2>
<h2>好好学习,增量式收获</h2>
<h2>hello,JavaScript!!!</h2>
</div>
<input type="button" id="btnclick2" value="click"/>

<!--以下部分是JavaScript-->
<script type="text/javascript">
function deleteele(){
var oldh2=document.getElementsByTagName("h2")
if(oldh2.length>0){
document.getElementById("div1").removeChild(oldh2[0]);
}
else{
alert("没有可删除的东西了")
}
return false;
}
document.getElementById("btnclick2").onclick=deleteele;//删除h2元素
</script>

</body>

在以上的方法中,document.getElementById("div1")所得到的就是父节点,而oldh2[0]就是即将删除的节点

第二种方法,通过访问节点的getElementById()方法返回指定的元素节点.代码如下(代码只附JavaScript部分):

<script type="text/javascript">
function deleteele(){
var oldh2=document.getElementById("div1");
if(oldh2.hasChildNodes()){
oldh2.removeChild(oldh2.firstChild);
}
else{
alert("没有可删除的东西了")
}
return false;
}
document.getElementById("btnclick2").onclick=deleteele;//删除h2元素
</script>

以上的document.getElementById("div1")就是父节点,oldh2.firstChild是即将删除的子节点.

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript删除html结点操作

html页面上删除结点的操作跟添加结点中将段落添加在指定依附点之前相似,将段落添加在指定依附点之前代码为document.body.insertBefore(newGraf, docForm),删除的...

document对象 动态的创建元素(节点)/添加元素(节点)/删除元素(节点)

主要是tong'gu document示例 function test1(){ //创建元素 var myElement=document.createElement("a")...
  • hll174
  • hll174
  • 2014-10-02 15:55
  • 3205

js之DOM操作(删除节点removeChild())

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。 语法: nodeObject....

js动态删除div元素

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成。用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示。所以考虑到用js来搞...

js动态创建和删除div

研究了一下js的动态生成div功能。特此一记: var i=1; function cDiv(){ var oDiv=document.createElement("div"); oDiv.styl...

浅析jQuery删除节点的三个方法

jQuery提供了三种删除节点的方法,即remove(),detach()和empty()。 测试所用HTML代码: 你最喜欢的水果是? 苹果 橘子 菠萝 1、remove()方法 ...

javascript文本节点操作方法你知道吗?

Text类型文本节点由Text 类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符,但不能包含HTML 代码。Text 节点具有以下特征:  nodeType...

删除GridView中的一行的-----两种操作方法.

在GridView中的编辑列中添加一 方法1:                    ...

HTML DOM之节点操作方法(1)

DOM

03 JS-DOM之--节点属性操作方法(2种)附案例源码

属性操作两种方法: 1、 dom对象.属性 == dom对象[属性] ; 2、 dom对象.get/set/removeAttribute() 获取属性:dom对...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)