DOM，全称Document Object Model（文档对象模型）。 它是浏览器把 HTML 文档解析成的一个树形结构对象，让 JavaScript 能随意增删改查页面内容。 学前端必须跨过的第一关，今天一篇讲透！
一、先有 HTML，再有 DOM
你写的 HTML 本质上就是纯文本文件：
<html> <body> <h1>用户列表</h1> <p id="desc">这里显示数据</p> </body> </html>浏览器加载这个 HTML 文件后，会把它解析成一棵"树"：
document └─ html └─ body ├─ h1 （文本："用户列表"） └─ p （id="desc"，文本："这里显示数据"）这棵树就叫DOM（文档对象模型）。
💡关键理解：树里的每个标签（
h1、p、body...）都是一个节点（Node），JavaScript 可以通过 API 拿到任意一个节点并对其进行操作。
二、为什么要有 DOM？
因为HTML 是死的，DOM 是活的。
| HTML | DOM | |
|---|---|---|
| 本质 | 纯文本标记语言 | 浏览器内存中的对象树 |
| 能力 | 只能描述页面结构 | 可以被 JavaScript 动态修改 |
| 比喻 | 建筑图纸 | 可以随时拆改的真实建筑 |
浏览器解析完 HTML 生成 DOM 后，JavaScript 就可以通过DOM API来做这些事：
| 操作 | 代码示例 |
|---|---|
| 改变文字 | document.getElementById('desc').textContent = '新内容' |
| 改样式 | document.getElementById('desc').style.color = 'red' |
| 添加元素 | document.createElement('div') |
| 删除元素 | element.remove() |
| 绑定事件 | button.addEventListener('click', handler) |
⚠️没有 DOM，网页就是一张静态图片，无法有任何交互。
三、DOM 树长什么样？
以一个更复杂的页面为例：
<!DOCTYPE html> <html> <head> <title>我的页面</title> </head> <body> <nav id="navbar"> <a href="/">首页</a> <a href="/about">关于</a> </nav> <main> <h1>文章标题</h1> <p class="content">这是正文内容...</p> <button id="btn">点击我</button> </main> </body> </html>对应的DOM 树结构如下：
Document（文档节点） │ └── html（元素节点） ├── head（元素节点） │ └── title（元素节点） │ └── "我的页面"（文本节点） │ └── body（元素节点） ├── nav（元素节点）[id="navbar"] │ ├── a（元素节点）[href="/"] │ │ └── "首页"（文本节点） │ └── a（元素节点）[href="/about"] │ └── "关于"（文本节点） │ └── main（元素节点） ├── h1（元素节点） │ └── "文章标题"（文本节点） │ ├── p（元素节点）[class="content"] │ └── "这是正文内容..."（文本节点） │ └── button（元素节点）[id="btn"] └── "点击我"（文本节点）📌 节点类型速查
| 节点类型 | 说明 | 示例 |
|---|---|---|
| Document | 整个文档的入口 | document |
| Element | HTML 标签元素 | <div>、<p>、<h1> |
| Text | 元素内的纯文本 | "Hello World" |
| Attribute | 元素的属性 | id="desc"、class="content" |
| Comment | HTML 注释 | <!-- 注释 --> |
四、JavaScript 如何操作 DOM？
🔸 获取元素
// 通过 ID 获取（返回单个元素） const desc = document.getElementById('desc'); // 通过类名获取（返回元素集合） const items = document.getElementsByClassName('item'); // 通过选择器获取（推荐，最灵活） const nav = document.querySelector('#navbar'); const links = document.querySelectorAll('a'); // 返回所有匹配项🔸 修改内容
// 修改纯文本内容 element.textContent = '新文字'; // 修改 HTML 内容（可包含标签） element.innerHTML = '<strong>加粗文字</strong>'; // 修改表单元素的值 input.value = '新值';🔸 修改样式
// 直接修改行内样式 element.style.color = 'red'; element.style.fontSize = '20px'; element.style.display = 'none'; // 隐藏元素// 更推荐：通过 CSS 类切换 element.classList.add('active'); element.classList.remove('hidden'); element.classList.toggle('open');🔸 创建和删除元素
// 创建新元素 const newDiv = document.createElement('div'); newDiv.textContent = '我是新来的'; newDiv.className = 'card'; // 添加到页面中 document.body.appendChild(newDiv); // 在某个元素之前插入 parent.insertBefore(newElement, referenceElement); // 删除元素 element.remove(); // 清空所有子元素 parent.innerHTML = '';🔸 事件绑定
// 点击事件 button.addEventListener('click', function() { alert('被点击了！'); }); // 表单提交 form.addEventListener('submit', function(e) { e.preventDefault(); // 阻止默认行为 // 处理表单数据... });五、和Spring MVC串起来
🔄 Spring MVC 返回 JSON → 前端用 DOM 渲染
后端 Controller 只负责送数据：
@GetMapping("/user/{id}") public User getUser(@PathVariable Long id) { return userService.getUserById(id); // 返回 JSON：{ "name": "张三", "age": 25 } }前端拿到 JSON 后，用 JavaScript 操作 DOM 把数据填进页面：
fetch('/api/user/1') .then(res => res.json()) .then(data => { // 操作 DOM，把数据渲染到页面上 document.getElementById('name').textContent = data.name; document.getElementById('age').textContent = data.age; });这就是经典的前后端分离模式：
后端（Spring Boot）→ 返回 JSON 数据 → 前端 JS → 操作 DOM → 用户看到页面🔄 Vue / React 和 DOM 的关系
你可能听过 Vue 或 React，它们底层最终也是在操作 DOM，但加了一层优化：
| 框架 | 与 DOM 的关系 |
|---|---|
| 原生 JavaScript | 直接操作真实 DOM |
| Vue / React | 先操作"虚拟 DOM"，再批量更新真实 DOM |
💡虚拟 DOM 就像"草稿纸"：框架先在内存中算好最小改动量，然后一次性更新真实 DOM，比直接操作效率高很多。
🔄 Flutter 没有 DOM
Flutter 是 Google 的跨平台 UI 框架，它不依赖浏览器，而是用自己的引擎（Skia）直接绘制界面。所以 Flutter 里没有 DOM 这个概念，也不能用 DOM API。
| 技术 | 有 DOM 吗 | 渲染方式 |
|---|---|---|
| Web 前端（HTML/CSS/JS） | ✅ 有 | 浏览器解析 HTML → 生成 DOM → 渲染 |
| Flutter | ❌ 没有 | Skia 引擎直接绘制 |
| React Native | ❌ 没有 | 调用原生平台组件 |
六、虚拟 DOM 是什么？
既然提到了虚拟 DOM，这里简单展开一下：
传统直接操作 DOM 的问题
每次 DOM 变化，浏览器可能需要：
重排（Reflow）：重新计算元素的位置和大小
重绘（Repaint）：重新绘制页面的视觉效果
频繁操作 DOM（比如在一个循环里不断插入元素）会导致性能问题。
虚拟 DOM 的解决思路
状态变化 ↓ 框架在内存中生成新的虚拟 DOM 树（轻量级 JS 对象） ↓ 和新旧两棵虚拟 DOM 树做对比（Diff 算法） ↓ 计算出最小的变更部分 ↓ 只把变化的部分更新到真实 DOM ↓ 性能大幅提升 ✅一句话：虚拟 DOM 就是 DOM 的"替身"，让框架在内存里先把账算清楚，再一次性跟真实 DOM 结算。
七、一句话总结
DOM 是浏览器给 HTML 装的"遥控器"，让 JavaScript 能动态控制页面上的一切。
理解了 DOM，你就理解了网页从"静态展示"变成"动态交互"的核心原理。接下来无论是学原生 JS、Vue 还是 React，都离不开 DOM 的知识体系。
📚 延伸学习路线
DOM 基础（本篇） ↓ DOM 事件机制（冒泡 / 捕获 / 委托） ↓ BOM（Browser Object Model）浏览器对象模型 ↓ Vue / React 的虚拟 DOM 与 diff 算法 ↓ Web Components 与 Shadow DOM🔗相关推荐：
MDN Web Docs - DOM 简介
