您的位置：首页 > 其它

DOM（一）-18-(节点操作-删除节点)

2015-08-20 16:31 483 查看

演示DOM删除节点操作，记住，凡是删除或移除操作，就去API找包含delete或remove的方法，在DHTML API中的div对象中，有如下方法：

（1）removeAttribute：删除对象的给定标签属性。

（2）removeAttributeNode：从对象中删除删除 attribute 对象。

（3）removeBehavior：分离元素的行为。

（4）removeChild：从元素上删除子结点。

（5）removeExpression：从指定属性中删除表达式。

（6）removeNode：从文档层次中删除对象。

（详见DHTML API文档）

=============================================================================================================

【示例】单击button，div_2节点被删除

<html>
<head>
<style type="text/css">
div{
border:#0CF 1px solid;
width:200px;
padding:30px;
margin:10px;
}
#div_1{
background-color:#0CF;
}
#div_2{
background-color:#FCF;
}
#div_3{
background-color:#C0F;
}
#div_4{
background-color:#0F0;
}
</style>
</head>

<body>
<script type="text/javascirpt">

function delNode(){

//1.获取div_2节点
var oDivNode = document.getElementById("div_2");

//2.使用div节点的removeNode方法删除。根据DHTML API文档，该方法需要传入boolean型变量，不传默认false
oDivNode.removeNode(true);
/*
*这里如果传入false，则会删除div_2区域，但是其中的内容"好好学习，day day up！"还在；如果传入true，则div_2区域连同内容
*一起删除。
*/
/*
*【注意】removeNode方法较少用，一般使用removeChild方法，即删除子节点
*所以先获取div_2的父节点，然后在父节点上使用removeChild将div_2删除。
*/
oDivNode.parentNode.removeChild(oDivNode);

}

</script>

<input type="button" value="删除节点" onclick="delNode()" />

<hr/>

<div id="div_1">

</div>
<div id="div_2">
好好学习，day day up!
</div>
<div id="div_3">
div区域演示文字
</div>
<div id="div_4">
节点的增删改查
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航