JavaScript操作DOM的核心是“先获取、再修改”，常见问题包括获取不到元素（ID带#、脚本执行过早）、querySelector伪类理解错误、innerHTML与textContent语义混淆、动态元素事件绑定失效及重复查询性能差。
JavaScript 操作 DOM 元素的核心在于「先获取、再修改」，但实际写的时候最容易卡在获取不到元素、或修改后没生效——通常不是语法错，而是执行时机或选择器不匹配。
document.getElementById 用不对就拿不到元素
这是最常用也最容易出问题的方法。它只接受 ID 字符串，且 ID 必须是全局唯一、不能带 # 符号。
-
document.getElementById("my-btn")✅ 正确（HTML 中对应<button id="my-btn">） -
document.getElementById("#my-btn")❌ 错误，会返回null - 如果脚本放在
<head>里，而元素还没加载，也会返回null—— 解决办法是把脚本放</body>前，或监听DOMContentLoaded
querySelector 和 querySelectorAll 的坑：伪类和作用域
这两个方法支持 CSS 选择器语法，但要注意浏览器兼容性和常见误用。
-
document.querySelector(".item:first-child")✅ 可以，但:first-child是 CSS 伪类，匹配的是「作为父元素第一个子元素的 .item」，不是「.item 集合里的第一个」 - 要取第一个匹配项，用
querySelector；要取全部，用querySelectorAll，后者返回的是NodeList，不是数组，不能直接用map或forEach（除非转成数组或用for...of） -
querySelector只返回第一个匹配项，哪怕页面里有多个，别指望它遍历
修改元素内容时 innerHTML vs textContent 的区别
看起来都能改文字，但行为完全不同，选错会导致 XSS 风险或布局异常。
立即学习“Java免费学习笔记（深入）”；
-
el.innerHTML = "<strong>Hello</strong>"→ 解析 HTML，插入富文本，有执行脚本风险 -
el.textContent = "<strong>Hello</strong>"→ 当纯文本渲染，<和>会被转义，安全但不解析标签 - 如果只是设纯文本，优先用
textContent；需要动态插结构，才用innerHTML，且确保内容可信
事件绑定后点击没反应？检查是否动态添加了元素
用 querySelector 获取元素并绑定 click，但如果这个元素是后来用 JS 插入的（比如通过 innerHTML +=），绑定就失效了。
- 静态元素：直接
el.addEventListener("click", handler) - 动态元素：用事件委托，绑定到父容器，判断
e.target是否匹配，例如：parent.addEventListener("click", e => { if (e.target.matches(".dynamic-btn")) { ... } }) - 别在循环里反复调用
querySelector找同一组元素，性能差；查一次存变量里复用
DOM 操作本身不难，难的是时机、作用域和数据类型这些隐性约束。尤其是 querySelectorAll 返回的类数组、textContent 和 innerHTML 的语义差异、以及动态内容下的事件绑定——这几个点，几乎覆盖了 80% 的 DOM 相关报错和白屏问题。
