html dom节点操作(获取/修改/添加或删除)

在HTML DOM中，对节点进行操作是常见的任务，包括获取、修改、添加和删除节点。下面我将以JavaScript为例，简要介绍这些操作的基本方法。

### 获取节点

通常使用`document.getElementById()`, `document.getElementsByClassName()`, `document.getElementsByTagName()`, `document.querySelector()`, `document.querySelectorAll()`等方法来获取DOM节点。

// 通过ID获取
var elemById = document.getElementById("myId");

// 通过类名获取（返回一个HTMLCollection）
var elemsByClass = document.getElementsByClassName("myClass");

// 通过标签名获取（返回一个HTMLCollection）
var elemsByTag = document.getElementsByTagName("div");

// 使用querySelector获取第一个匹配的元素
var firstMatch = document.querySelector(".myClass");

// 使用querySelectorAll获取所有匹配的元素（返回一个NodeList）
var allMatches = document.querySelectorAll(".myClass");

### 修改节点

修改节点通常指的是修改节点的属性或文本内容。

// 修改节点的文本内容
elemById.textContent = "新的文本内容";

// 修改节点的属性
elemById.setAttribute("title", "新的标题");

// 移除节点的属性
elemById.removeAttribute("class");

### 添加节点

添加节点通常涉及创建一个新节点，并将其添加到DOM树的某个位置。

// 创建一个新的元素节点
var newElem = document.createElement("p");
newElem.textContent = "这是一个新的段落。";

// 将新节点添加到现有节点中
document.body.appendChild(newElem);

// 或者，将新节点添加到某个特定元素之后
var referenceNode = document.getElementById("someId");
referenceNode.parentNode.insertBefore(newElem, referenceNode.nextSibling);

### 删除节点

删除节点通常指的是从DOM树中移除一个节点。

// 获取要删除的节点
var toRemove = document.getElementById("toRemoveId");

// 移除节点
if (toRemove && toRemove.parentNode) {
    toRemove.parentNode.removeChild(toRemove);
}

以上是在HTML DOM中进行节点操作的基本方法。请注意，这些操作会直接影响页面的结构和内容，因此请谨慎使用。