JavaScript DOM 操作指南：深入探索节点操作

2024-02-06 19:01:35

前言

在 JavaScript 的世界里，DOM（Document Object Model）扮演着至关重要的角色。它允许我们以编程方式与网页文档进行交互，包括访问、修改和操纵文档的内容和结构。而 DOM 操作则构成了 DOM 的核心，使我们能够与文档树进行互动。本文将深入探讨 DOM 操作，重点关注 DOM 节点的操作，并提供清晰易懂的指南和实际示例。

DOM 树：网页文档的结构

为了理解 DOM 操作，首先需要了解 DOM 树。DOM 树是一个层次结构，了 HTML 文档中各种元素之间的关系。每个元素都被表示为一个节点，并且具有特定的父子关系。通过 DOM 树，我们可以访问和修改文档中的任何元素。

获取 DOM 节点

要对 DOM 节点进行操作，第一步是获取它们的引用。在 JavaScript 中，有多种方法可以获取 DOM 节点：

document.getElementById('id值') ：通过元素的 id 属性获取特定元素。
document.querySelector('选择器') ：使用 CSS 选择器获取匹配的第一个元素。
document.querySelectorAll('选择器') ：使用 CSS 选择器获取所有匹配的元素。

操作 DOM 节点

获取 DOM 节点后，我们可以对它们进行各种操作，包括：

创建节点 ：使用 document.createElement() 创建新的 HTML 元素。
追加节点 ：使用 appendChild() 方法将子节点追加到父节点。
删除节点 ：使用 removeChild() 方法从父节点中删除子节点。
插入节点 ：使用 insertBefore() 方法在指定位置插入子节点。
替换节点 ：使用 replaceChild() 方法用新节点替换现有节点。

属性和值

每个 DOM 节点都有一个属性和值集合。我们可以使用 getAttribute() 和 setAttribute() 方法获取和设置这些属性的值。例如，我们可以使用以下代码获取并设置 class 属性：

const element = document.getElementById('myElement');
const classValue = element.getAttribute('class');
element.setAttribute('class', 'new-class-value');

事件处理

DOM 节点还可以响应事件，例如单击、悬停或键盘输入。我们可以使用 addEventListener() 方法为节点添加事件监听器，然后在事件发生时执行特定代码：

const element = document.getElementById('myElement');
element.addEventListener('click', function() {
  // 在单击时执行此代码
});

示例：动态添加和删除元素

为了进一步说明 DOM 操作，让我们考虑一个动态添加和删除元素的示例。以下代码演示了如何使用 appendChild() 和 removeChild() 方法：

const container = document.getElementById('container');

const newElement = document.createElement('div');
newElement.textContent = '新元素';

container.appendChild(newElement); // 添加新元素

// 延迟 3 秒后删除新元素
setTimeout(() => {
  container.removeChild(newElement);
}, 3000);