DOM是浏览器将HTML解析成的内存中对象树，JavaScript通过它操作页面元素；它是可访问修改的对象模型，非HTML字符串，支持安全属性操作与事件绑定。
DOM 是浏览器把 HTML 文档解析成的一棵树状结构，JavaScript 通过它才能真正“看到”和操作页面元素。没有 DOM，document.getElementById 就只是个报错的函数。
DOM 是什么：不是 HTML 字符串，而是内存里的对象树
HTML 是文本，DOM 是浏览器加载后在内存中构建的、可被 JavaScript 访问和修改的对象模型。同一个 <div id="box">Hello</div>，在 HTML 文件里是字符串，在 DOM 里是拥有 id、textContent、className 等属性的 JS 对象。
关键区别：
- 修改 HTML 字符串（比如用
innerHTML = "..."）会触发重新解析和重绘，可能清空子元素绑定的事件监听器 - 操作 DOM 节点（比如用
element.textContent = "..."或element.classList.add("active")）只改属性或内容，更安全、更可控 -
document.querySelector返回的是 DOM 元素对象，不是字符串 —— 它能调用.addEventListener，但不能直接.split("")
怎么获取元素：别只记 getElementById，优先用 querySelector
querySelector 和 querySelectorAll 支持 CSS 选择器语法，更灵活，现代项目中应作为首选。
立即学习“Java免费学习笔记（深入）”；
常见写法对比：
- 获取单个元素：
document.querySelector("#header")、document.querySelector("button[data-action='save']") - 获取多个元素：
document.querySelectorAll(".item")返回NodeList，可用forEach遍历 -
getElementById快一点但只能按 ID 查；getElementsByClassName返回的是动态HTMLCollection，长度会随 DOM 变化，容易引发意外交互 - 注意：如果元素还没加载完就执行查询（比如脚本放在
里），结果是null—— 把脚本放前，或用DOMContentLoaded事件包裹
怎么改内容：分清 textContent、innerText 和 innerHTML
三者行为差异直接影响安全性与渲染效果，选错会导致 XSS 漏洞或样式异常。
-
textContent：只处理纯文本，忽略 HTML 标签，不触发重排，最安全。适合填入用户输入内容 -
innerText：受 CSS 影响（比如display: none的文本不计入），会触发重排，性能较差，IE 专属行为残留，尽量避免 -
innerHTML：解析并渲染 HTML 字符串，危险！若拼接了未过滤的用户数据（如el.innerHTML = "<p>" + userInput + "</p>"），可能执行任意脚本
安全替代方案：
const el = document.querySelector("#output");
const safeText = userInput.replace(/[&<>"']/g, c => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[c]));
el.textContent = safeText;
怎么增删元素：别用 innerHTML +=，用 appendChild 或 insertAdjacentHTML
innerHTML += 看似方便，实则每次都会销毁旧节点、重建全部子树，已绑定的事件监听器全部丢失，表单输入框内容清空，性能也差。
- 添加新节点：先用
document.createElement创建，再用appendChild或insertBefore插入 - 批量插入 HTML 片段：用
element.insertAdjacentHTML("beforeend", "<li>New</li>")，比innerHTML +=更精准，不破坏已有节点 - 删除节点：没有
.remove()方法的老浏览器需用parentNode.removeChild(child)；现代环境可直接调用element.remove() - 替换节点：用
parentNode.replaceChild(newNode, oldNode)，或更简洁的oldNode.replaceWith(newNode)
最容易被忽略的一点：动态插入的元素，其事件监听器必须在插入后单独绑定，或者用事件委托（监听父容器的 click，再用 e.target.matches("button.delete") 判断来源）。否则按钮点了没反应，不是代码写错了，是根本没绑上。
