37、操作DOM树

最新推荐文章于 2021-09-20 14:24:34 发布

辛勤小王子

于 2020-05-04 11:04:00 发布

121

分类专栏： # Java Web学习笔记

本文链接：https://blog.csdn.net/qq_37917691/article/details/105913468

版权

Java Web学习笔记专栏收录该内容

124 篇文章 1 订阅

订阅专栏

appendChild()方法
insertBefore(newNode, oldNode)方法
removeChild()方法
replaceChild(newNode, odlNode)方法
cloneNode(boolean)方法

appendChild()方法：相当于剪切粘贴的效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		#div1{
			width:200px;
			height:150px;
			border:2px solid red;
		}
		#div2{
			width:200px;
			height:150px;
			border:5px dashed green;
		}
	</style>
</head>
<body>
	<div id="div1">
		<ul id="ulid11">
			<li>tom</li>
			<li>kitty</li>
			<li>jack</li>
		</ul>
	</div>
	<div id="div2">

	</div>
	<input type="button" value="add1" onclick="add1()"/>
</body>
<script type="text/javascript">
	function add1(){
		//得到div2
		var div2 = document.getElementById("div2");
		//获取ul
		var ul1 = document.getElementById("ulid11");
		//把ul添加到div2里面
		div2.appendChild(ul1);

	}
</script>
</html>

在这里插入图片描述

insertBefore(newNode, oldNode)方法

在某个节点之前插入一个新的节点
两个参数：要插入的节点、在谁之前插入
插入一个节点，节点不存在，则要创建：
1、创建标签
2、创建文本
3、把文本添加到标签下面

<!DOCTYPE html>
<html lang="en">
<head>
	
</head>
<body>
	<ul id="ulid21">
		<li id="lil1">西施</li>
		<li id="lil2">王昭君</li>
		<li id="lil3">貂蝉</li>
		<li id="lil4">杨玉环</li>
	</ul>
	<input type="button" value="insert" onclick="insert1()"/>
</body>
<script type="text/javascript">
	//在<li>貂蝉</li>之前添加<li>董小宛</li>
	function insert1(){
		/*
			1、获取到lil3标签
			2、创建li
			3、创建文本
			4、把文本添加到li下面
			5、获取到ul
			6、把li添加到ul下面
		*/

		var lil3 = document.getElementById("lil3");
		var lil5 = document.createElement("li");
		var text15 = document.createTextNode("董小宛");
		lil5.appendChild(text15);
		var ul1 = document.getElementById("ulid21");
		ul1.insertBefore(lil5,lil3);
	}
</script>
</html>

在这里插入图片描述

removeChild()方法：只能通过父节点来删除，不能通过自己来删除自己

<!DOCTYPE html>
<html lang="en">
<head>
	
</head>
<body>
	<ul id="ul1">
		<li id="li1">西施</li>
		<li id="li2">王昭君</li>
		<li id="li3">貂蝉</li>
		<li id="li4">杨玉环</li>
	</ul>
	<input type="button" value="remove" onclick="remove1()"/>
</body>
<script type="text/javascript">
	//删除<li>杨玉环</li>
	function remove1(){
		/*
			1、获取到li4标签
			2、获取父节点ul标签
			3、执行删除（通过父节点删除）
		*/

		var li4 = document.getElementById("li4");
		//获取父节点的方式有两种：通过id或通过parentNode属性
		var ul1 = li4.parentNode;
		ul1.removeChild(li4);
	}
</script>
</html>

在这里插入图片描述

replaceChild(newNode, odlNode)方法：不能通过自己替换自己，只能通过父节点来替换

<!DOCTYPE html>
<html lang="en">
<head>
	
</head>
<body>
	<ul id="ul1">
		<li id="li1">西施</li>
		<li id="li2">王昭君</li>
		<li id="li3">貂蝉</li>
		<li id="li4">杨玉环</li>
	</ul>
	<input type="button" value="replace" onclick="replace1()"/>
</body>
<script type="text/javascript">
	//替换<li>杨玉环</li>为<li>小龙女</li>
	function replace1(){
		/*
			1、获取到li4标签
			2、创建li标签
			3、创建文本
			4、把文本添加到li下面
			5、获取父节点ul
			6、执行替换replaceChild
		*/

		var li4 = document.getElementById("li4");
		var liNew = document.createElement("li");
		var textNew = document.createTextNode("小龙女");
		liNew.appendChild(textNew);
		var ul1 = li4.parentNode;
		ul1.replaceChild(liNew,li4);
	}
</script>
</html>

在这里插入图片描述

cloneNode(boolean)方法：复制节点

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		#div1{
			width:200px;
			height:300px;
			border:2px solid red;
		}
	</style>
</head>
<body>
	<ul id="ul1">
		<li id="li1">西施</li>
		<li id="li2">王昭君</li>
		<li id="li3">貂蝉</li>
		<li id="li4">杨玉环</li>
	</ul>
	<div id="div1">

	</div>
	<input type="button" value="cloneNode" onclick="cloneNode1()"/>
</body>
<script type="text/javascript">
	//把ul列表复制到div中
	function cloneNode1(){
		/*
			1、获取ul
			2、执行复制方法cloneNode（true）
			3、把复制之后的内容放到div里面去
			   *获取到div
			   *appendChild方法
		*/
		var ul1 = document.getElementById("ul1");
		var ul1_clone = ul1.cloneNode(true);
		var div1 = document.getElementById("div1");
		div1.appendChild(ul1_clone);
	}
</script>
</html>

在这里插入图片描述

操作DOM树总结：

在这里插入图片描述

辛勤小王子

关注

0
点赞
踩
0
收藏
打赏
0
评论
37、操作DOM树

appendChild()方法 insertBefore(newNode, oldNode)方法 removeChild()方法 replaceChild(newNode, odlNode)方法 cloneNode(boolean)方法appendChild()方法：相当于剪切粘贴的效果<!DOCTYPE html><html lang="en">&...
复制链接

扫一扫