前端DOMTree常用Api总结

前端

2024-01-27 22:26:29

当然可以，以下是前端DOMTree常用Api总结的文章：

前端DOMTree常用Api总结。

DOMTreeApi

DOMTreeApi是JavaScript中用于操作DOM树的API。它提供了查找Tree的位置、添加和删除节点、更改节点内容以及事件处理等功能。

查找Tree的位置

DOMTreeApi提供了以下方法来查找Tree的位置：

parentNode：返回父节点。
childNodes：返回子节点列表。
firstChild：返回第一个子节点。
lastChild：返回最后一个子节点。
nextSibling：返回下一个兄弟节点。
previousSibling：返回上一个兄弟节点。

example:

const parentNode = document.getElementById("parentNode");
const childNodes = parentNode.childNodes;
const firstChild = parentNode.firstChild;
const lastChild = parentNode.lastChild;
const nextSibling = firstChild.nextSibling;
const previousSibling = lastChild.previousSibling;

添加和删除节点

DOMTreeApi提供了以下方法来添加和删除节点：

appendChild()：将一个节点添加到父节点的末尾。
insertBefore()：将一个节点添加到父节点的指定位置。
removeChild()：从父节点中删除一个节点。

example:

const parentNode = document.getElementById("parentNode");
const newNode = document.createElement("div");
parentNode.appendChild(newNode);

const referenceNode = document.getElementById("referenceNode");
parentNode.insertBefore(newNode, referenceNode);

parentNode.removeChild(newNode);

更改节点内容

DOMTreeApi提供了以下方法来更改节点内容：

innerHTML：获取或设置节点的HTML内容。
textContent：获取或设置节点的文本内容。

example:

const node = document.getElementById("node");
node.innerHTML = "<p>Hello, world!</p>";
node.textContent = "Hello, world!";

事件处理

DOMTreeApi提供了以下方法来添加和删除事件处理程序：

addEventListener()：向节点添加一个事件处理程序。
removeEventListener()：从节点中删除一个事件处理程序。

example:

const node = document.getElementById("node");
node.addEventListener("click", function() {
  alert("Hello, world!");
});

node.removeEventListener("click", function() {
  alert("Hello, world!");
});