JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)

最新推荐文章于 2025-01-15 17:15:05 发布

原创最新推荐文章于 2025-01-15 17:15:05 发布 · 5.0k 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #插入节点 #删除节点 #替换节点 #克隆节点

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了如何使用DOM（文档对象模型）进行节点操作，包括添加、删除、替换节点以及克隆节点的方法。通过实际示例展示了appendChild(), insertBefore(), removeChild(), replaceChild()和cloneNode()等方法的具体应用。

操作节点

Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表：
Node类型原型方法说明：

方法	说明
appendChild()	向节点的子节点列表的结尾添加新的子节点
cloneNode()	复制节点
hasChildNodes()	判断当前节点是否拥有子节点
insertBefore()	在指定的子节点前插入新的子节点
normalize()	合并相邻的Text节点并删除空的Text节点
removeChild()	删除（并返回）当前节点的指定子节点
replaceChild()	用新节点替换一个子节点

其中，appendChild()、insertBefore()、removeChild()、replaceChild()方法用于对子节点进行添加、删除和复制操作。要使用这几个方法必须先取得父节点，可以使用parentNode属性。另外，并不是所有类型的节点都又子节点，如果不支持子节点的节点上调用了这些方法将会导致错误发生。

插入节点

appendChild():

appendChild(newchild)//newchild表示新添加的节点对象，并返回新增的节点

示例：将段落文本增加到指定的div元素中，使它成为当前节点的最后一个子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
		<script>
			var p = document.createElement("p"); //创建段落节点
			var txt = document.createTextNode("盒子模型"); //创建文本节点
			p.appendChild(txt); //把文本节点增加到段落节点中
			document.getElementById("box").appendChild(p);//添加到div
		</script>
	</body>
</html>

在这里插入图片描述
如果文档树种已经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加的节点是DocumentFragment节点，则不会直接插入，而是把它的子节点按顺序插入当前节点的末尾。
将元素添加到文档中，浏览器会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反应在浏览器中。

示例：新建两个盒子和一个按钮，点击按钮执行插入操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ margin:lem;}
			#red {border:solid 1px red;}
			#blue {border:solid 1px blue;}
		</style>
	</head>
	<body>
		<div id="red">
			<h1>红盒子</h1>
		</div>
		<div id="blue">蓝盒子</div>
		<button id="ok">移动</button>
		<script>
			var ok = document.getElementById("ok");
			ok.onclick = function(){
				var red = document.getElementById("red");
				var blue = document.getElementById("blue");
				blue.appendChild(red);
			}
		</script>
	</body>
</html>

在这里插入图片描述

insertBefore()：

insertBefore(newChild, refchild)//newchild表示插入新的节点，refchild表示在此节点前插入新的节点，返回新的子节点

示例：依然使用上一个示例，如果把蓝盒子移动到红盒子所包含的< h1 >标题元素前面，使用appendChild()是无法实现的，此时应该使用insertBefore()

<script>
	var ok = document.getElementById("ok");
	ok.onclick = function(){
		var red = document.getElementById("red");
		var blue = document.getElementById("blue");
		var h1 = document.getElementsByTagName("h1")[0];
		red.insertBefore(blue, h1);
	}
</script>

在这里插入图片描述注意：insertBefore()方法与appendChild()方法一样，可以把指定元素及其所包含的所有子元素都一起插入到指定位置中。同时会先删除移动的元素，然后再重新插入到新的位置。

删除节点：remoceChild()

nodeObject.removeChild(node)//node为要删除的节点，如果删除成功，返回被删除的节点；失败则返回null

注意：当使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除。

示例：单击按钮，删除红盒子中的< h1 > 标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ margin:lem;}
			#red {border:solid 1px red;}
			#blue {border:solid 1px blue;}
		</style>
	</head>
	<body>
		<div id="red">
			<h1>红盒子</h1>
		</div>
		<div id="blue">蓝盒子</div>
		<button id="ok">移动</button>
		<script>
			var ok = document.getElementById("ok");
			ok.onclick = function(){
				var red = document.getElementById("red");
				var h1 = document.getElementsByTagName("h1")[0];
				red.removeChild(h1);
			}
		</script>
	</body>
</html>

在这里插入图片描述
封装一个删除指定节点下所有子节点的函数：

function empty(e){//e,要被删除的子节点的父节点
	while(e.firstChild){
		e.removeChild(e.firstChild);
	}
}

替换节点：replaceChild()

nodeObject.replaceChild(new_node, old_node)
//new_node新的节点，old_node被替换的节点
//替换成功返回被替换的节点，失败则返回null

示例：用一个< h2 > 标题替换红盒子中的 < h1 >标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{ margin:lem;}
			#red {border:solid 1px red;}
			#blue {border:solid 1px blue;}
		</style>
	</head>
	<body>
		<div id="red">
			<h1>红盒子</h1>
		</div>
		<div id="blue">蓝盒子</div>
		<button id="ok">替换</button>
		<script>
			var ok = document.getElementById("ok");
			ok.onclick = function(){
				var red = document.getElementById("red");
				var h1 = document.getElementsByTagName("h1")[0];
				var h2 = document.createElement("h2");
				var txt = document.createTextNode("二级标题");
				h2.appendChild(txt);
				red.replaceChild(h2, h1);
			}
		</script>
	</body>
</html>

在这里插入图片描述
如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助replaceChild()方法在文档中使用现有的节点替换另一个存在的节点。

克隆节点

nodeObject.cloneNode(include_all)
//include_all为布尔值，如果为true，那么将克隆原节点，以及所有子节点；为false时，仅复制节点本身
//复制后返回的节点副本属于文档所有，但并没有为它指定父节点，需要通过appendChild()、insertBefore()或replaceChild()方法将它添加到文档中

注意：cloneNode()方法不会复制添加到DOM节点中的Javascript属性，如事件处理程序等。这个方法只复制HTML特性或子节点，其他一切都不会复制。IE在此存在一个bug，即它会复制事件处理程序，所以建议在复制之间最好先移除事件处理程序。

示例：复制一个节点及所有包含的子节点。复制创建的 < h1 >标题，该节点所包含的子节点及文本节点都将复制过来，然后把它增加到body元素的尾部。

var p = document.createElement("p");//创建一个p元素
var h1 = document.createElement("h1");//创建一个h1元素
var txt = document.createTextNode("Hello World");//创建文本节点

p.appendChild(txt);
h1.appendChild(p);

document.body.appendChild(h1);//把h1添加到body中
var new_h1 = h1.cloneNode(true);
document.body.appendChild(new_h1);