DOM是浏览器解析HTML后生成的内存树结构，非静态文件；操作对象是实时可读写的Element，需注意执行时机、内容安全、样式控制及事件绑定方式。
DOM 操作不是“学完就能用”，而是“用到才真正懂”——它本质是 JavaScript 和页面元素之间的实时对话，不是静态快照。
什么是 DOM？它和 HTML 文件不是一回事
DOM（Document Object Model）是浏览器把 HTML 解析后生成的内存树结构，每个标签变成一个对象（Element），文本、属性、样式都是这个对象的属性或方法。你改 document.body.innerHTML，改的不是源码文件，而是当前已加载页面的内存副本。
- HTML 是纯文本，只在首次加载时起作用；DOM 是活的对象，随时可读写
-
document.getElementById("app")返回的是一个Element对象，不是字符串，所以能链式调用.style.color = "red" - 直接修改 HTML 文件（比如用编辑器改 index.html）对已打开的页面完全没影响
最常用的 4 类 DOM 操作及其典型陷阱
别一上来就背所有 API，先盯住这四件事：找元素、读内容、改样式、绑事件。其余都是它们的组合变形。
-
找元素：优先用
document.querySelector()（支持 CSS 选择器），比getElementById更灵活；但注意它只返回第一个匹配项，要多个得用querySelectorAll()并手动遍历 -
读/写内容：
textContent只处理纯文本（安全，防 XSS），innerHTML解析 HTML 字符串（危险，慎拼接用户输入） -
改样式：直接设
element.style.xxx只覆盖行内样式；要改 class 或复用 CSS 规则，用element.classList.add("active") -
绑事件：用
addEventListener()，别用onclick = function() {...}—— 后者会覆盖之前绑定的同类型事件
为什么 document.getElementById("x") 有时返回 null？
不是代码错，大概率是执行时机不对。DOM 树还没构建完，JS 就去查元素了。
立即学习“Java免费学习笔记（深入）”；
- 脚本放在
<head>里，且没加defer或async→ 必然null - 解决方案：把
<script>放在</body>前；或监听DOMContentLoaded事件：document.addEventListener("DOMContentLoaded", () => { /* 此时 DOM 已就绪 */ }); - 动态插入的元素（比如用
innerHTML新增的按钮），需在插入后再绑定事件，或用事件委托：document.addEventListener("click", e => { if (e.target.matches(".dynamic-btn")) { ... } });
性能敏感点：批量操作别反复触发重排重绘
每次读写 offsetHeight、style.color 等布局相关属性，都可能触发浏览器强制同步计算（reflow），连续 10 次就是 10 次重排。
- 批量修改样式，优先用
classList切换预定义 CSS 类，而不是逐个设style.xxx - 要插多个节点，先用
document.createDocumentFragment()组装好，再一次性appendChild() - 避免在循环里反复调用
getBoundingClientRect()或offsetTop，缓存结果
DOM 操作本身不难，难的是判断“此刻该不该操作”“操作后谁会响应”“有没有更轻量的替代路径”。比如想隐藏一个列表项，与其删掉再重建，不如切个 hidden 类；想更新文字，优先 textContent 而非 innerHTML —— 这些取舍，比记住 API 更关键。
