JavaScript操作DOM的核心是选对方法并避开隐式陷阱：ID查询用getElementById最快，动态元素需事件委托，innerHTML有XSS风险应优先用textContent，replaceChild/removeChild返回被操作节点供复用。
JavaScript 操作 DOM 的核心不在“学多少 API”，而在“选对方法+避开隐式陷阱”。绝大多数 DOM 问题其实出在节点生命周期、类型误判或事件绑定时机上，而不是 API 不够用。
querySelector 和 getElementById 哪个更快？
getElementById 是原生最快的方法，浏览器内部做了 ID 索引优化；querySelector 走的是 CSS 选择器引擎，哪怕只写 #myId，它也要走完整解析流程。性能敏感场景（如动画帧内操作）优先用 getElementById 或 getElementsByClassName（返回 HTMLCollection，非实时更新但轻量）。
- 注意
querySelector返回null（没匹配到），而querySelectorAll总返回NodeList（可能为空） -
getElementsByName在表单中仍常用，但返回的不是数组，是HTMLCollection，不能直接用.map() - 动态插入的元素，
querySelector不会自动感知——它只查当前 DOM 树快照
innerHTML 和 textContent 的关键区别
innerHTML 解析并执行 HTML 字符串，有 XSS 风险；textContent 只当纯文本处理，安全但不渲染标签。很多人以为 innerText 是“带样式的文本”，其实它受 CSS visibility 和 display 影响，且在 Firefox 中不触发重排计算，行为不一致。
- 想插入用户输入内容？必须用
textContent或createTextNode() - 需要渲染富文本？先用
DOMPurify.sanitize()过滤，再塞进innerHTML -
textContent会合并连续空白符，innerText会按渲染后换行折行——调试时容易误判值
addEventListener 绑定失败的三个常见原因
绑定不生效，90% 不是语法错，而是节点不存在、事件名拼错，或监听了冒泡阶段却在捕获阶段触发了事件。
立即学习“Java免费学习笔记（深入）”；
- 确保绑定前节点已挂载：用
DOMContentLoaded或把脚本放
