深入理解 DOM 节点类型及属性：原生 JavaScript 操作 DOM 的基石

见解分享

2023-12-15 19:56:45

在前端开发领域，文档对象模型（DOM）扮演着至关重要的角色，它将网页文档表示为一个层次结构，方便开发者操作和修改网页内容。作为一名熟练的前端工程师，深入理解 DOM 节点类型和属性对于有效操控网页至关重要。

本文将带领您探索 DOM 节点类型和属性的方方面面，揭示原生 JavaScript 操作 DOM 的奥秘，让您掌握这项核心技能。我们将在深入解析的基础上，提供清晰的示例和代码片段，帮助您将理论应用到实际项目中。

DOM 节点类型

DOM 节点是 DOM 树中的基本单位，代表着网页文档中的不同元素或内容。DOM 节点类型反映了节点在文档中的不同角色，常见的节点类型包括：

1. 元素节点

元素节点代表着 HTML 元素，如 <div>, <p>, <a> 等。它们是 DOM 树中最常见的节点类型，拥有丰富的属性和方法，可以进行各种操作。

2. 文本节点

文本节点包含元素内的文本内容。它们不具备任何属性或方法，仅代表着元素中的文字。

3. 属性节点

属性节点表示元素的属性，如 <div style="color: red;"> 中的 style 属性。它们只存在于元素节点中，提供有关元素状态或行为的信息。

4. 注释节点

注释节点包含 HTML 注释，如 。它们对 DOM 结构没有直接影响，主要用于向文档添加备注。

DOM 节点属性

DOM 节点属性提供了有关节点的附加信息，可以用于获取、设置或修改节点的特性。节点属性主要分为两类：

1. 标准属性

标准属性是所有 DOM 节点共有的属性，如 id, class, style 等。它们提供了节点的基本信息和样式。

2. 自有属性

自有属性是特定于不同节点类型的属性，如 href 属性只适用于 <a> 元素，src 属性只适用于 <img> 元素。这些属性反映了节点的特定特性和功能。

操作 DOM 节点属性

JavaScript 提供了丰富的 API 来操作 DOM 节点属性，这些方法包括：

1. 获取属性值

element.getAttribute(attributeName)：获取指定属性的值。

2. 设置属性值

element.setAttribute(attributeName, value)：设置指定属性的值。

3. 修改属性值

element.style.propertyName = value：设置 CSS 样式属性。
element.classList.add(className)：添加 CSS 类名。
element.classList.remove(className)：移除 CSS 类名。

实例

以下代码示例演示了如何使用 JavaScript 操作 DOM 节点属性：

// 获取指定元素的 id 属性值
const elementId = document.getElementById("myElement").getAttribute("id");

// 设置指定元素的 style 属性
document.getElementById("myElement").style.color = "red";

// 向指定元素添加一个 CSS 类名
document.getElementById("myElement").classList.add("my-class");