JavaScript DOM 操作详解:节点操作与文档交互实战指南
DOM(Document Object Model,文档对象模型)是浏览器将 HTML 文档解析后形成的树形结构,JavaScript 通过 DOM 操作可以动态修改网页的内容、结构和样式。从 “DOM 基础概念→核心操作流程→实战场景→常见问题” 四个维度,系统讲解 DOM 操作的底层逻辑与实用技巧,帮你掌握动态网页开发的核心能力。
DOM 核心概念:节点与文档树
在进行 DOM 操作前,需先理解 “节点” 和 “文档树” 的基本概念 ——HTML 文档中所有内容(标签、属性、文本)都被抽象为 “节点”,这些节点按层级关系组成 “文档树”。
1. 三种核心节点类型
HTML 文档中的节点主要分为三类,每种节点的特性和用途不同:
| 节点类型 | 描述 | 示例(基于 <p title="remark">备注</p>) |
核心属性(nodeType/nodeName/nodeValue) |
|---|---|---|---|
| 元素节点 | HTML 标签(如 <p>、<div>、<li>),是文档树的 “骨架”,可包含子节点 |
<p> 标签本身 |
nodeType: 1;nodeName: 标签名大写(如 P);nodeValue: null(元素节点无此属性) |
| 属性节点 | 元素节点的属性(如 title、id、class),依附于元素节点存在 |
title="remark" 属性 |
nodeType: 2;nodeName: 属性名(如 title);nodeValue: 属性值(如 remark) |
| 文本节点 | 元素节点内的文本内容(如标签中的文字、空格、换行),是元素节点的子节点 | <p> 标签内的 “备注” 文本 |
nodeType: 3;nodeName: #text;nodeValue: 文本内容(如 备注) |
关键补充:
- 除上述三种外,DOM 还有注释节点(
nodeType: 8)、文档节点(document,nodeType: 9)等,但日常开发中以 “元素 / 属性 / 文本节点” 为主; - 节点关系:元素节点可包含子节点(文本节点、其他元素节点),属性节点是元素节点的 “附属”,不参与文档树的层级关系。
2. 文档树结构
HTML 文档被解析后,节点按 “父子、兄弟” 关系组成树形结构,例如: