关闭

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

标签: javascriptdivbutton
4044人阅读 评论(0) 收藏 举报

在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是即将删除的子节点.

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:57370次
    • 积分:968
    • 等级:
    • 排名:千里之外
    • 原创:42篇
    • 转载:1篇
    • 译文:0篇
    • 评论:3条
    最新评论