DOM（一）-19-(节点操作-替换&克隆节点)

最新推荐文章于 2020-12-16 16:34:21 发布

wy_0928

最新推荐文章于 2020-12-16 16:34:21 发布

阅读量536

点赞数

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

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

版权

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

42 篇文章 0 订阅

订阅专栏

【修改节点】
在div对象中有如下两方法：

（1）replaceChild 用新的子元素替换已有的子元素。
语法：oReplace = object.replaceChild(oNewNode, oChildNode)
第一个参数是新节点，第二个参数是旧节点，即用第一个参数替换掉第二个参数

（2）replaceNode 用其它元素替换对象。
语法：oReplace = object.replaceNode(oNewNode)
若A需要被替换称为B，则用A调用该方法，传入B即可

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

【示例1】
需求：用div_3节点替换div_1节点

<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/javascript">
		
			function updateNode(){
			
				/*
				 *获取div_1和div_3，
				 *使用replaceNode方法进行替换。
				 */
				var oDivNode_1 = document.getElementById("div_1");
				var oDivNode_3 = document.getElementById("div_3");
				
				oDivNode_1.replaceNode(oDivNode_3);//1节点调用方法，传入需要被替换的内容，即3节点内容
//发现运行之后div_1确实换成了div_3，但是div_3没了，因为这个replaceNode方法是先将div_1删除再把div_3移动到div_1的位置上
				
				//【注意】不建议使用replaceNode方法，建议用replaceChild方法
				oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
				
			}
		
		</script>
		
		<input type="button" value="修改节点" οnclick="updateNode()" />
		
		<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>

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

示例1中修改节点都是将div_3干掉，即修改完成后，div_1换成了div_3，且div_3也没了

【示例2】
新需求：用div_3节点替换div_1节点，但是div_3依然保留

这就需要用到div对象中的一个方法：
cloneNode：从文档层次中复制对对象的引用。
该方法用于复制节点
【注意】该方法有个参数，即传入false或true，如果传入false就复制当前节点（不包含其子节点，即不带儿子），如果传入true就
连其子节点一起复制（即带儿子）

<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/javascript">
		
			function cloneDemo(){
			
				//1.获取div_1和div_3节点
				var oDivNode_1 = document.getElementById("div_1");
				var oDivNode_3 = document.getElementById("div_3");
				
				//2.克隆一个div_3节点
				var oCopyDivNode_3 = oDivNode_3.cloneNode(true);
				
				//3.用克隆节点去替换div_1，这时候原div_3依然保留
				oDivNode_1.parentNode.replaceChild(oCopyDivNode_3,oDivNode_1);
				
			}
		
		</script>
		
		<input type="button" value="克隆节点" οnclick="cloneDemo()" />
		
		<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>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（一）-19-(节点操作-替换&克隆节点)

【修改节点】在div对象中有如下两方法：（1）replaceChild 用新的子元素替换已有的子元素。语法：oReplace = object.replaceChild(oNewNode, oChildNode)第一个参数是新节点，第二个参数是旧节点，即用第一个参数替换掉第二个参数（2）replaceNode 用其它元素替换对象。语法：oReplace =
复制链接

扫一扫

专栏目录