大家好，这次来分享DOM，这是在我写了一个小项目user chat之后，提出的一些个人理解，和大家分享一下，完整代码可以在ai_doubao_zzh: 走向AGI，走向豆包里看到
一、DOM 是什么？
HTML 是文本，浏览器读完之后在内存里面把他变成一颗“对象树”，这棵树就叫做DOM。
左边是HTML源代码，右边是它的DOM树
- document：整个树的根，JS全局自带，不用声明。
- querySelector：从根出发，用选择器查找。
- innerHTML：找到节点后，修改它的内容。
二、为什么要使用DOM？
- 不用DOM，操作HTML只能当初字符串来拼接，就像在豆腐上雕刻，又慢又容易出错
HTML结构稍微变化一下，所有的replace的逻辑都要重写
- 使用DOM，JS可以像操作对象一样，操作页面，就像搭积木，又快又精准
三、document 对象 -- JS访问页面的唯一入口
-
document.documentELement 根节点
-
document.body 页面节点
-
document.querySelector() // → 在整棵树上用选择器找节点
const oBody = document.querySelector('.table tbody');
// ↑ 前缀 o 表示这是个 DOM 对象（匈牙利命名法）
四、操作节点
改内容
oBody.innerHTML += `
<tr>
<td>${user.id}</td>
<td>${user.name}</td>
</tr>
`;
innerHTML 会解析 HTML 标签。如果只是纯文本，用 textContent 更安全：
oBody.textContent = '纯文本，标签不会生效';
改样式
oBody.style.display = 'none'; // 隐藏
oBody.style.color = 'red'; // 改文字颜色
五、完整数据流
index.html 被浏览器加载
↓
浏览器解析 HTML → 构建 DOM 树
↓
<script src="common.js"> 开始执行
↓
document.querySelector('.table tbody') ← 在 DOM 树上找节点
↓
fetch → then → JSON.parse ← 从后端拿数据
↓
oBody.innerHTML += `...` ← 修改 DOM 树
↓
浏览器检测 DOM 变化 → 自动重绘页面 → 用户看到新内容
这就是 DOM 编程的完整闭环：拿到节点 → 拿到数据 → 改节点内容 → 页面自动更新。
总结
- DOM 就是 HTML 在内存中的对象树，JS通过它来操作页面
- DOM 让本来脆弱的页面，变成了可轻松编程的对象
