原生js实现针对Dom节点的CRUD操作示例

下面我将为您详细讲解“原生JS实现针对DOM节点的CRUD操作示例”的攻略。

一、前提准备

在进行CRUD操作前，我们需要先获取DOM节点。可以使用document.querySelector()和document.querySelectorAll()来获取单个节点和多个节点。例如，以下代码可以获取id为“myDiv”的元素：

const myDiv = document.querySelector("#myDiv");

二、操作节点

1. 创建节点

使用document.createElement()方法可以创建一个新的元素节点。例如，以下代码可以创建一个新的div元素：

const newDiv = document.createElement("div");

2. 插入节点

使用Node.appendChild()方法可以将一个子节点添加到父节点的末尾。例如，以下代码可以将新创建的div元素添加到id为“container”的元素中：

const container = document.querySelector("#container");
container.appendChild(newDiv);

使用Node.insertBefore()方法可以在指定位置插入一个节点。例如，以下代码可以将新创建的div元素插入到id为“container”的元素的第一个子节点之前：

container.insertBefore(newDiv, container.firstChild);

3. 替换节点

使用Node.replaceChild()方法可以替换一个元素节点。例如，以下代码可以将id为“oldDiv”的元素替换为新创建的div元素：

const oldDiv = document.querySelector("#oldDiv");
container.replaceChild(newDiv, oldDiv);

4. 删除节点

使用Node.removeChild()方法可以删除一个子节点。例如，以下代码可以删除id为“myDiv”的元素：

const myDiv = document.querySelector("#myDiv");
container.removeChild(myDiv);

三、示例说明

1. 创建节点示例

以下代码可以创建一个新的li元素，并将其添加到id为“myList”的ul元素中：

// 创建新的li元素
const newLi = document.createElement("li");
newLi.textContent = "第四个条目";

// 获取ul元素
const myList = document.querySelector("#myList");

// 将新的li元素添加到ul中
myList.appendChild(newLi);

2. 删除节点示例

以下代码可以删除所有class为“box”的元素：

// 获取所有class为“box”的元素
const boxList = document.querySelectorAll(".box");

// 遍历所有元素，并将它们从其父节点中删除
boxList.forEach(box => {
  box.parentNode.removeChild(box);
});

以上就是“原生JS实现针对DOM节点的CRUD操作示例”的攻略和示例说明，希望能对您有所帮助。