java补完——JavaScript 操作 DOM 节点树、增&删&改&替换&复制5个方法加遍历（通过操作节点操作页面）

本文链接：https://blog.youkuaiyun.com/weixin_44470080/article/details/104524117

本文详细介绍了JavaScript操作DOM节点的方法，包括添加节点、插入节点、删除节点、替换节点、复制节点，并提供了遍历文档节点树和元素节点树的策略。讲解了如appendChild、insertBefore、removeChild、replaceChild、cloneNode等核心API的使用，并强调了兼容性和遍历技巧。

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

文章说明：黑色字体-已知，蓝色字体-所见即所得，红色字体-还需要再找资料弄明白的，黄色背景-提炼关键信息
参考资料：很多参考资料，段落下有原文链接到原作者

定义

w3c的dom标准，文档中的所有内容都是节点，节点是dom的最小组成单元。
浏览器将文档解析成一系列节点，组成一个dom节点树。
dom节点树体现了文档的层次结构。
dom节点树有两种类型，dom文档节点树，dom元素节点树，文档节点树包含文档中所有类型的节点，元素节点树只包含元素节点。
在这里插入图片描述

添加节点

appendChild()：添加子节点到末尾（类似于粘贴复制的效果）
步骤：获取到ul、获取到div2、把ul添加到div2

插入节点

insertBefore(newNode，oldNode)：在某个节点之前插入一个新的节点
步骤：获取到li3标签、创建li、创建文本、把文本添加到li下面、获取到ul、把li添加到ul下面

删除节点

removeChild()
步骤：获取到li标签、执行父节点Ul标签、执行删除

替换节点

replaceChild(newNode，oldNode)
步骤：获取到li标签、创建标签li、创建文本、把文本添加到li下面、获取父节点Ul标签、执行替换

复制节点

cloneNode(boolean)
步骤：获取到ul、执行复制方法：cloneNode(true)、把复制后的内容放到div2中、获取div2、appendChild方法

<html>
	<head>
		<title>oneStar</title>
		<style type="text/css">
			div#div1{
   
				width:360px;
				height:150px;
				border:2px solid red;
			}
			div#div2{
   
				width:360px;
				height:150px;
				border:2px solid black;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul id="ul1">
				<li id="li1">oneStar</li>
				<