DOM全称Document Object Model文档对象模型。 它是浏览器把 HTML 文档解析成的一个树形结构对象让 JavaScript 能随意增删改查页面内容。 学前端必须跨过的第一关今天一篇讲透一、先有 HTML再有 DOM你写的 HTML 本质上就是纯文本文件html body h1用户列表/h1 p iddesc这里显示数据/p /body /html浏览器加载这个 HTML 文件后会把它解析成一棵树document └─ html └─ body ├─ h1 文本用户列表 └─ p iddesc文本这里显示数据这棵树就叫DOM文档对象模型。关键理解树里的每个标签h1、p、body...都是一个节点NodeJavaScript 可以通过 API 拿到任意一个节点并对其进行操作。二、为什么要有 DOM因为HTML 是死的DOM 是活的。HTMLDOM本质纯文本标记语言浏览器内存中的对象树能力只能描述页面结构可以被 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 idnavbar a href/首页/a a href/about关于/a /nav main h1文章标题/h1 p classcontent这是正文内容.../p button idbtn点击我/button /main /body /html对应的DOM 树结构如下Document文档节点 │ └── html元素节点 ├── head元素节点 │ └── title元素节点 │ └── 我的页面文本节点 │ └── body元素节点 ├── nav元素节点[idnavbar] │ ├── a元素节点[href/] │ │ └── 首页文本节点 │ └── a元素节点[href/about] │ └── 关于文本节点 │ └── main元素节点 ├── h1元素节点 │ └── 文章标题文本节点 │ ├── p元素节点[classcontent] │ └── 这是正文内容...文本节点 │ └── button元素节点[idbtn] └── 点击我文本节点 节点类型速查节点类型说明示例Document整个文档的入口documentElementHTML 标签元素div、p、h1Text元素内的纯文本Hello WorldAttribute元素的属性iddesc、classcontentCommentHTML 注释!-- 注释 --四、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直接操作真实 DOMVue / React先操作虚拟 DOM再批量更新真实 DOM虚拟 DOM 就像草稿纸框架先在内存中算好最小改动量然后一次性更新真实 DOM比直接操作效率高很多。 Flutter 没有 DOMFlutter 是 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 事件机制冒泡 / 捕获 / 委托 ↓ BOMBrowser Object Model浏览器对象模型 ↓ Vue / React 的虚拟 DOM 与 diff 算法 ↓ Web Components 与 Shadow DOM相关推荐MDN Web Docs - DOM 简介
