DOM 节点的操作方法

DOM：JavaScript操纵网页的利器

当你浏览网页时，屏幕上呈现的每个元素，从文本和图像到按钮和表单，都由一个称为 DOM （文档对象模型）的复杂结构表示。DOM 是 JavaScript 与网页交互的核心，使开发者能够动态地添加、修改和删除元素，从而创造出交互式且用户友好的体验。

获取 DOM 节点：你的起点

获取 DOM 节点是与网页元素进行交互的第一步。有几种方法可以做到这一点：

• 根据 ID 获取元素： 使用 document.getElementById() 根据唯一的 ID 属性获取特定元素。
• 根据标签名获取元素集合： 使用 document.getElementsByTagName() 检索具有特定标签名（例如 <div> 或 <p>) 的所有元素。
• 根据类名获取元素集合： 使用 document.getElementsByClassName() 根据类名（例如 ".my-class"`) 检索所有元素。
• 使用 CSS 选择器获取元素： 使用 document.querySelector() 和 document.querySelectorAll() 根据 CSS 选择器检索第一个或所有匹配的元素。

代码示例：

// 根据 ID 获取元素
const myElement = document.getElementById("my-element");

// 根据标签名获取元素集合
const allParagraphs = document.getElementsByTagName("p");

// 根据类名获取元素集合
const elementsWithClass = document.getElementsByClassName("my-class");

// 根据 CSS 选择器获取元素
const firstDiv = document.querySelector("div");
const allLinks = document.querySelectorAll("a");

创建 DOM 节点：添加新元素

除了获取现有的 DOM 节点外，您还可以使用 JavaScript 动态创建新的元素。

• 创建元素： 使用 document.createElement() 创建一个新元素，例如 <div> 或 <p>.
• 创建文本节点： 使用 document.createTextNode() 创建一个包含文本内容的文本节点。
• 创建注释节点： 使用 document.createComment() 创建一个包含注释的注释节点。

代码示例：

// 创建一个新 div 元素
const newDiv = document.createElement("div");

// 创建一个文本节点
const newText = document.createTextNode("Hello world!");

// 将文本节点添加到 div 元素中
newDiv.appendChild(newText);

// 将 div 元素添加到文档中
document.body.appendChild(newDiv);

修改 DOM 节点：让网页 оживить

修改 DOM 节点是创建交互式网页的关键。您可以：

• 设置属性： 使用 node.setAttribute() 设置元素的属性，例如其 ID、类名或值。
• 删除属性： 使用 node.removeAttribute() 删除元素的属性。
• 添加子节点： 使用 node.appendChild() 将新元素作为子节点添加到元素的末尾。
• 插入子节点： 使用 node.insertBefore() 在现有子节点之前插入一个新子节点。
• 删除子节点： 使用 node.removeChild() 从元素中删除子节点。
• 替换子节点： 使用 node.replaceChild() 用一个新子节点替换一个旧子节点。
• 设置文本内容： 使用 node.textContent = value 设置元素的文本内容。
• 设置 HTML 内容： 使用 node.innerHTML = html 设置元素的 HTML 内容。

代码示例：

// 设置 div 的 ID 属性
newDiv.setAttribute("id", "my-new-div");

// 删除 div 的类名属性
newDiv.removeAttribute("my-class");

// 将一个按钮元素作为子节点添加到 div 中
const newButton = document.createElement("button");
newButton.textContent = "Click me";
newDiv.appendChild(newButton);

// 设置按钮的文本内容
newButton.textContent = "Click here instead";

// 用一个新的文本节点替换按钮的文本节点
newButton.replaceChild(document.createTextNode("Hello again!"), newButton.firstChild);

删除 DOM 节点：释放网页中的空间

删除不再需要的 DOM 节点可以优化网页性能并清除不再相关的元素。

• 从父节点删除节点： 使用 node.parentNode.removeChild(node) 从元素的父节点中删除它。

代码示例：

// 从文档中删除 div 元素
document.body.removeChild(newDiv);

获取节点信息：了解其关系

除了修改 DOM 节点外，您还可以获取有关其属性、子节点、父节点和兄弟节点的信息。

• 属性： 使用 node.attributes 获取元素的所有属性。
• 子节点： 使用 node.childNodes 获取元素的所有子节点。
• 第一个子节点： 使用 node.firstChild 获取元素的第一个子节点。
• 最后一个子节点： 使用 node.lastChild 获取元素的最后一个子节点。
• 下一个兄弟节点： 使用 node.nextSibling 获取元素的下一个兄弟节点。
• 上一个兄弟节点： 使用 node.previousSibling 获取元素的上一个兄弟节点。
• 父节点： 使用 node.parentNode 获取元素的父节点。

代码示例：

// 获取按钮的第一个子节点（文本节点）
const buttonText = newButton.firstChild;

// 获取按钮的父节点（div）
const buttonParent = newButton.parentNode;

操作节点样式：让你的网页栩栩如生

样式对于创建视觉上吸引人的网页至关重要。您可以使用 JavaScript 更改 DOM 节点的样式属性：

• 设置样式属性： 使用 node.style.property = value 设置元素的单个样式属性，例如其颜色或字体大小。
• 设置所有样式属性： 使用 node.style.cssText = cssText 设置元素的所有样式属性。

代码示例：

// 将按钮的背景颜色设置为红色
newButton.style.backgroundColor = "red";

// 设置按钮的字体大小和颜色
newButton.style.cssText = "font-size: 20px; color: white;";

结论

DOM 是 JavaScript 与网页交互的强大工具。通过获取、创建、修改和删除 DOM 节点，开发者可以动态地构建和操作交互式且引人入胜的用户界面。从获取元素到操作样式，DOM 提供了一系列功能，让您释放网页的全部潜力。

常见问题解答

1. 什么是 DOM？

DOM（文档对象模型）是一个表示网页中所有元素及其关系的树形结构。

2. 如何获取 DOM 节点？

可以使用 document.getElementById(), document.getElementsByTagName(), document.getElementsByClassName(), document.querySelector() 和 document.querySelectorAll() 等方法。

3. 如何创建新的 DOM 节点？

可以使用 document.createElement(), document.createTextNode() 和 document.createComment() 等方法创建新的元素、文本节点和注释节点。

4. 如何修改 DOM 节点？

可以使用 node.setAttribute(), node.removeAttribute(), node.appendChild(), node.insertBefore(), node.removeChild(), node.replaceChild(), node.textContent = value 和 node.innerHTML = html 等方法修改 DOM 节点。

5. 如何操作 DOM 节点的样式？

可以使用 node.style.property = value 和 node.style.cssText = cssText 等方法设置 DOM 节点的样式属性。