DOM节点操作：增删改查

# 第一章：认识DOM节点操作

## 1.1 什么是DOM？

DOM（Document Object Model）是一种用于表示和操作HTML和XML文档的编程接口。它将文档表示为一个由节点构成的树形结构，这些节点可以是元素、属性、文本或者注释等。通过DOM，我们可以使用脚本语言（比如JavaScript）动态地访问和修改文档的内容、结构和样式。

## 1.2 DOM节点的基本操作

DOM节点的基本操作包括创建、插入、删除和修改节点。通过这些操作，我们可以对页面中的元素进行增删改查的操作。

## 1.3 DOM操作的作用和意义

DOM操作在前端开发中非常常见，它可以帮助我们实现动态页面的创建、更新和删除。通过操作DOM节点，我们可以实现动态加载数据、响应用户交互以及实现一些特殊效果等。

以上是第一章的内容，后续章节将详细介绍节点的增删改查操作。
## 第二章：节点的增加操作

### 2.1 使用createElement创建新节点

在DOM操作中，使用createElement方法可以创建一个新的DOM节点。具体使用方法如下：

// 创建一个新的p标签节点
var newParagraph = document.createElement("p");

// 设置新节点的文本内容
newParagraph.textContent = "这是一个新创建的段落节点";

// 将新节点添加到文档中的body元素中
document.body.appendChild(newParagraph);

上述代码首先使用createElement方法创建了一个新的p标签节点，然后通过textContent属性设置了该节点的文本内容，最后使用appendChild方法将新节点添加到了文档中的body元素中。

### 2.2 使用appendChild添加子节点

除了使用createElement创建新节点外，我们还可以通过appendChild方法将一个已有的节点作为另一个节点的子节点添加到DOM树中。具体使用方法如下：

// 创建一个新的div标签节点
var newDiv = document.createElement("div");

// 创建一个新的p标签节点
var newParagraph = document.createElement("p");
newParagraph.textContent = "这是新创建的div的子节点";

// 将p节点添加到div节点中
newDiv.appendChild(newParagraph);

// 将div节点添加到body节点中
document.body.appendChild(newDiv);

上述代码中，首先分别使用createElement方法创建了一个新的div和p标签节点，然后通过appendChild方法将p节点作为div节点的子节点添加到DOM树中，最后使用appendChild方法将div节点添加到body节点中。

### 2.3 使用insertBefore插入节点

除了appendChild方法，我们还可以使用insertBefore方法在指定位置插入节点。具体使用方法如下：

// 创建一个新的p标签节点
var newParagraph = document.createElement("p");
newParagraph.textContent = "这是新创建的段落节点";

// 获取参考节点
var referenceNode = document.getElementById("target");

// 将新节点插入到参考节点之前
referenceNode.parentNode.insertBefore(newParagraph, referenceNode);

上述代码中，首先使用createElement方法创建了一个新的p标签节点并设置了文本内容，然后通过document.getElementById方法获取了目标节点（参考节点），最后使用insertBefore方法将新节点插入到参考节点之前。

### 2.4 示例及实战应用

下面是一个实际场景中的示例，假设我们要在一个表格中添加一行数据，具体的代码实现如下：

// 创建一个新的表格行
var newRow = document.createElement("tr");

// 创建新的单元格，并设置单元格的内容
var cell1 = document.createElement("td");
cell1.textContent = "John";
var cell2 = document.createElement("td");
cell2.textContent = "Doe";
var cell3 = document.createElement("td");
cell3.textContent = "25";
var cell4 = document.createElement("td");
cell4.textContent = "Male";

// 将单元格添加到行中
newRow.appendChild(cell1);
newRow.appendChild(cell2);
newRow.appendChild(cell3);
newRow.appendChild(cell4);

// 找到目标表格
var table = document.getElementByI