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

最新推荐文章于 2024-06-25 20:43:11 发布

wy_0928

最新推荐文章于 2024-06-25 20:43:11 发布

阅读量760

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47809745

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

演示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="删除节点" οnclick="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>