DOM 改变节点学习笔记
DOM（Document Object Model）提供了一种访问和操作 HTML 或 XML 文档的方式，我们可以通过使用 JavaScript 来改变节点。
创建新节点
我们可以使用 createElement() 方法来创建新的 DOM 节点。例如，要创建一个新的段落元素，可以这样编写代码：
javascriptCopy Codelet newParagraph = document.createElement("p");
添加子节点
我们可以使用 appendChild() 方法向现有元素添加子节点。例如，以下代码将在 body 元素中添加新的段落元素：
javascriptCopy Codedocument.body.appendChild(newParagraph);
替换节点
我们可以使用 replaceChild() 方法来替换现有的 DOM 节点。例如，以下代码将使用新的段落元素替换 div 元素中的旧段落元素：
javascriptCopy Codelet oldParagraph = document.getElementById("oldParagraph");
document.getElementById("div").replaceChild(newParagraph, oldParagraph);
删除节点
我们可以使用 removeChild() 方法删除现有的 DOM 节点。例如，以下代码将删除 div 元素中的段落元素：
javascriptCopy Codelet paragraphToRemove = document.getElementById("paragraphToRemove");
document.getElementById("div").removeChild(paragraphToRemove);
实例
以下示例演示如何添加、替换和删除节点：
htmlCopy Code<body>
<div id="example">
<p id="firstParagraph">这是第一个段落。</p>
<p id="secondParagraph">这是第二个段落。</p>
</div>
<script>
//创建一个新的段落元素
let newParagraph = document.createElement("p");
let paragraphText = document.createTextNode("这是新的段落。");
newParagraph.appendChild(paragraphText);
//将新元素添加到现有元素中
document.getElementById("example").appendChild(newParagraph);
//替换现有元素
let oldParagraph = document.getElementById("firstParagraph");
document.getElementById("example").replaceChild(newParagraph, oldParagraph);
//删除现有元素
let paragraphToRemove = document.getElementById("secondParagraph");
document.getElementById("example").removeChild(paragraphToRemove);
</script>
</body>
在例子中，我们首先创建了一个新的段落元素，然后使用 appendChild() 将新元素添加到 example 元素中。接着，我们使用 replaceChild() 方法将现有元素 firstParagraph 替换为新元素。最后，使用 removeChild() 方法删除了现有元素 secondParagraph。