DOM是浏览器将HTML解析成的节点树，根为document，包含Element、Text等节点类型；操作本质是修改内存对象，非HTML字符串。
DOM 不是 JavaScript 的一部分，而是浏览器提供的接口，JavaScript 通过它才能读写网页内容。别把它当成 JS 内置功能，否则遇到 document.getElementById 报错却查不到原因时会很困惑。
DOM 是什么：浏览器把 HTML 转成的对象树
HTML 加载后，浏览器会解析成一棵节点树（Document Object Model），每个标签、文本、属性都变成一个可编程的对象。比如 <div id="app"><p>Hello</p></div> 会被转成 document → div#app → p → Text 这样的嵌套结构。
关键点：
-
document是 DOM 树的根，所有操作都从它开始 - 节点类型分
Element（标签）、Text（文本）、Comment（注释）等，nodeType可区分 - DOM 操作本质是操作内存中的对象，不等于直接改 HTML 字符串
获取元素：选对方法，避开常见失效场景
最常用的是 document.getElementById 和 document.querySelector，但它们行为差异大，容易用错。
立即学习“Java免费学习笔记（深入）”；
使用建议：
-
document.getElementById：只认id，返回单个元素或null；ID 重复时只返回第一个，且大小写敏感 -
document.querySelector：支持 CSS 选择器，返回第一个匹配项；若要全部，用querySelectorAll（返回NodeList，不是数组） - 脚本放在
<head>里时，document.body还没生成，所有获取操作都会返回null—— 放在</body>前，或监听DOMContentLoaded事件
修改内容与属性：innerText vs textContent vs innerHTML
改文字看着简单，但三个属性处理方式完全不同，选错会导致 XSS 或布局异常。
区别要点：
-
innerText：受 CSS 影响（如display: none的文本不包含），会触发重排，且自动解码 HTML 实体 -
textContent：纯文本，不管样式，不解析 HTML，性能更好，适合防 XSS 场景 -
innerHTML：解析并渲染 HTML 字符串，有执行脚本风险；设为空字符串比removeChild更快清空子节点
示例：el.textContent = '<script>alert(1)</script>' 安全显示为文字；el.innerHTML = '<script>alert(1)</script>' 会执行脚本（现代浏览器已限制 inline script 执行，但仍有风险）。
动态添加/删除元素：别直接拼接字符串
用 innerHTML += 看似方便，但会销毁重建整个子树，导致绑定的事件丢失、输入框焦点消失、Canvas 状态清空。
正确做法：
- 新增：用
document.createElement+element.appendChild，或insertAdjacentHTML（指定插入位置，如'beforeend'） - 删除：用
element.remove()（现代标准），或parentNode.removeChild(element) - 批量操作：用
DocumentFragment缓存多个新节点，最后一次性挂载，减少重排次数
注意：innerHTML 插入含 <input> 的 HTML 时，其 value 属性不会被还原 —— 原生属性和 DOM 属性不是一回事，这点常被忽略。
