web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）

本文链接：https://blog.csdn.net/weixin_43823808/article/details/113978176

本文详细介绍了DOM元素的四种关键操作：appendChild()添加新元素、insertBefore()插入节点、removeChild()移除节点和replaceChild()替换节点。同时对比了getElementsByTagName()和querySelectorAll()的区别，展示了如何在实际项目中运用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.DOM元素的相关操作方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

1.1 创建新的 HTML 元素 (节点) - appendChild()

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<script type="text/javascript">
			//创建 <p></p> 元素
			var para=document.createElement("p");
			//为 <p></p> 元素创建一个新的文本节点
			var node=document.createTextNode("这是一个新的段落。");
			//将文本节点添加到 <p></p> 元素中
			para.appendChild(node);
			//查找已存在的元素 <div></div>
			var element=document.getElementById("div1");
			//把新创建的 <p></p> 元素添加到已存在的元素 <div></div> 中
			element.appendChild(para);
		</script>
	</body>
</html>

1.2 创建新的 HTML 元素 (节点) - insertBefore()

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<script type="text/javascript">
			//创建 <p></p> 元素
			var para=document.createElement("p");
			//为 <p></p> 元素创建一个新的文本节点
			var node=document.createTextNode("这是一个新的段落。");
			//将文本节点添加到 <p></p> 元素中
			para.appendChild(node);
			//查找已存在的父元素 <div></div>
			var element=document.getElementById("div1");
			//查找已存在的子元素 <p></p>
			var child=document.getElementById("p1");
			//在div模块中，将新创建的 para 元素添加到 child 元素之前
			element.insertBefore(para,child);
		</script>
	</body>
</html>

1.3 移除已存在的HTML 元素 - removeChild()

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<script type="text/javascript">
			var parent=document.getElementById("div1");
			var child=document.getElementById("p1");
			//从父元素 <div> 中移除 id="p1" 的子元素 <p>
			parent.removeChild(child);
		</script>
	</body>
</html>

1.4 替换 HTML 元素 - replaceChild()

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<script type="text/javascript">
			var para=document.createElement("p");
			var node=document.createTextNode("这是一个新的段落。");
			para.appendChild(node);
			var parent=document.getElementById("div1");
			var child=document.getElementById("p1");
			//在div模块中，将新创建的 para 元素替换掉 child 元素
			parent.replaceChild(para,child);
		</script>
	</body>
</html>

2.DOM集合（Collection）

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组。HTMLCollection 对象的 length 属性定义了集合中元素的数量。（常用于遍历集合中的元素）

注意：HTMLCollection 不是一个数组！

HTMLCollection 看起来可能是一个数组，但其实不是。你可以像数组一样，使用索引(以 0 为起始位置)来访问获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

2.1 实例一：通过索引访问元素、使用length属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<h2>JavaScript HTML DOM</h2>
		<p>Hello World!!!</p>	
		<p>Hello Redis!!!</p>	
		<p id="demo"></p>
		<script type="text/javascript">
			var myCollection=document.getElementsByTagName("p");
			document.getElementById("demo").innerHTML=
				"第二个段落的内容为: <span style='color: red;'>" + myCollection[1].innerHTML + "</span>";
			document.write("文档包含" + myCollection.length + " 个段落。");
		</script>
	</body>
</html>

2.2 实例二：通过length属性对集合进行遍历

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<h2>JavaScript HTML DOM</h2>
		<p>Hello World!!!</p>	
		<p>Hello Redis!!!</p>
		<p>点击按钮修改 p 元素的字体颜色。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<script type="text/javascript">
			function myFunction() {
				var myCollection=document.getElementsByTagName("p");
				for(var i=0;i<myCollection.length;i++) {
					myCollection[i].style.color="red";
				}
			}
		</script>
	</body>
</html>

3.DOM节点列表（NodeList）

NodeList 对象是一个从文档中获取的节点列表 (集合) 。NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

NodeList 对象 length 属性定义了节点列表中元素的数量。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组！节点列表看起来可能是一个数组，但其实不是。你可以像数组一样，使用索引来获取元素。（以 0 为起始位置来访问）

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

3.1 实例一：通过索引访问元素、使用length属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<h2>JavaScript HTML DOM</h2>
		<p>Hello World!!!</p>	
		<p>Hello Redis!!!</p>	
		<p id="demo"></p>
		<script type="text/javascript">
			var myNodelist=document.querySelectorAll("p");
			document.getElementById("demo").innerHTML=
				"第二个段落的内容为: <span style='color: red;'>" + myNodelist[1].innerHTML + "</span>";
			document.write("文档包含 " + myNodelist.length + " 个段落。");
		</script>
	</body>
</html>

3.2 实例二：通过length属性对节点列表进行遍历

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<h2>JavaScript HTML DOM</h2>
		<p>Hello World!!!</p>	
		<p>Hello Redis!!!</p>
		<p>点击按钮修改 p 元素的字体颜色。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<script type="text/javascript">
			function myFunction() {
				var myNodelist=document.querySelectorAll("p");
				for(var i=0;i<myNodelist.length;i++) {
					myNodelist[i].style.color="red";
				}
			}
		</script>
	</body>
</html>