浏览器DOM：你知道HTML的节点有哪几种吗？-深入学习前端重构知识体系

当前位置:　首页>> 技术小册>> 深入学习前端重构知识体系

### 浏览器DOM：你知道HTML的节点有哪几种吗？

在深入探索前端重构知识体系的过程中，理解并掌握浏览器文档对象模型（DOM）是不可或缺的一环。DOM作为连接Web页面结构与脚本语言的桥梁，使得开发者能够动态地访问、修改页面的内容、结构以及样式。而HTML文档作为DOM的基石，其构成元素——节点（Node），是理解和操作DOM的关键。本章将详细探讨HTML文档中节点的种类及其特性，为深入学习前端重构打下坚实基础。

#### 一、引言

在HTML文档中，一切皆可视为节点。从最基本的元素（如`<div>`、`<p>`等）到属性、文本内容，甚至是注释和文档类型声明，都被封装在DOM的节点体系之中。了解这些不同类型的节点，对于编写高效、可维护的前端代码至关重要。

#### 二、HTML节点的分类

HTML文档中的节点主要分为以下几大类：

##### 1. **元素节点（Element Nodes）**

元素节点是DOM中最常见的节点类型，它对应HTML文档中的标签。每个元素节点都代表了文档中的一个标签，比如`<div>`、`<p>`、`<a>`等。元素节点不仅可以包含文本内容，还可以包含其他元素节点、属性节点以及注释节点等子节点。

- **特性**：
  - 每个元素节点都有一个`nodeType`属性，其值为`1`，表示这是一个元素节点。
  - 元素节点可以通过`tagName`属性获取其标签名（大写形式）。
  - 元素节点具有`attributes`属性，包含该元素的所有属性节点。
  - 元素节点可以通过`childNodes`、`firstChild`、`lastChild`等属性访问其子节点。

##### 2. **文本节点（Text Nodes）**

文本节点包含了HTML元素之间的文本内容。这些文本内容直接展示给用户看，如段落中的文字、链接的文本部分等。文本节点不能包含子节点，它们只能包含文本数据。

- **特性**：
  - 文本节点的`nodeType`属性值为`3`。
  - 可以通过`nodeValue`或`textContent`属性获取或设置文本节点的值。
  - 文本节点没有子节点，因此`childNodes`为空。

##### 3. **属性节点（Attribute Nodes）**

虽然属性节点不直接出现在DOM树中（它们作为元素节点的属性存在），但在讨论HTML节点时，属性节点也是不可忽视的一部分。属性节点包含了元素的属性信息，如`<img src="image.jpg" alt="描述">`中的`src`和`alt`。

- **注意**：在DOM操作中，属性节点通常不直接通过`childNodes`等属性访问，而是通过元素节点的`attributes`属性或特定的属性访问方法（如`getAttribute`、`setAttribute`）来操作。

##### 4. **注释节点（Comment Nodes）**

注释节点用于在HTML文档中添加注释，这些注释不会显示在浏览器页面上，但可以帮助开发者理解代码结构或记录重要信息。注释以``结束。

- **特性**：
  - 注释节点的`nodeType`属性值为`8`。
  - 注释内容可以通过`nodeValue`或`textContent`属性获取或设置。

##### 5. **文档节点（Document Node）**

文档节点代表了整个HTML文档，是DOM树的根节点。它包含了文档中所有的其他节点。在JavaScript中，通过`document`对象可以访问到这个文档节点。

- **特性**：
  - 文档节点的`nodeType`属性值为`9`。
  - 它拥有如`documentElement`（指向`<html>`元素）、`body`（指向`<body>`元素）、`head`（指向`<head>`元素）等属性，用于快速访问文档中的关键部分。

##### 6. **文档类型声明节点（Document Type Definition Node, 简称DocType Node）**

文档类型声明节点（`<!DOCTYPE html>`）不是HTML元素，但它对浏览器渲染页面至关重要。它声明了HTML文档的版本和类型，虽然不直接作为DOM树的一部分，但在DOM操作中仍然可以访问到。

- **特性**：
  - 文档类型声明节点的`nodeType`属性值为`10`。
  - 在JavaScript中，通常不直接操作文档类型声明节点，但它是解析HTML文档时的重要部分。

#### 三、节点关系与遍历

了解不同类型的节点后，掌握节点之间的关系和遍历方法对于操作DOM至关重要。每个节点都与其父节点、子节点以及兄弟节点之间存在着特定的关系，这些关系构成了DOM树的结构。

- **父节点（Parent Node）**：通过`parentNode`属性访问。
- **子节点（Child Nodes）**：通过`childNodes`（包含所有类型的子节点）、`children`（仅包含元素节点）属性访问。
- **兄弟节点（Sibling Nodes）**：通过`previousSibling`、`nextSibling`（包含所有类型的兄弟节点）、`previousElementSibling`、`nextElementSibling`（仅包含元素节点）属性访问。

遍历DOM树通常使用递归或迭代的方法，根据具体需求选择合适的遍历策略，如深度优先搜索（DFS）或广度优先搜索（BFS）。

#### 四、总结

在深入学习前端重构知识体系的过程中，理解HTML节点的种类及其特性是构建高效、可维护前端应用的基础。从元素节点到文本节点，从属性节点到文档节点，每种节点都在DOM树中扮演着独特的角色。掌握这些节点的关系与遍历方法，将使我们在面对复杂的DOM操作时更加游刃有余。通过不断实践和应用，我们可以更加深入地理解和掌握前端重构的精髓，提升代码质量和开发效率。

该分类下的相关小册推荐：

剑指javascript

剑指javascript-ES6

Flutter核心技术与实战

JavaScript入门与进阶

JavaScript面试指南

经典设计模式Javascript版

npm script实战构建前端工作流

零基础学JavaScript

Javascript编程指南

javascript设计模式原理与实战

Javascript重点难点实例精讲（一）

ES6入门指南