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或把脚本放</body>前；document.querySelector('.btn')返回null时调.addEventListener会报 “Cannot read property 'addEventListener' of null” - 事件名是
click，不是onclick（后者是内联属性，仅用于 HTML 属性或 JS 赋值） - 动态添加的按钮，别反复绑定——用事件委托：
document.addEventListener('click', e => { if (e.target.matches('.dynamic-btn')) { ... } })
replaceChild 和 removeChild 容易被忽略的返回值
replaceChild 返回被替换掉的旧节点，removeChild 返回被删的节点——这两个返回值常被丢弃，但它们是唯一能拿到“下线节点”的机会。比如要保留旧节点的事件监听器或数据，就得靠这个返回值做迁移。
-
replaceChild(newNode, oldNode)要求oldNode必须是父节点的直接子节点，否则报 “NotFoundError” -
removeChild(node)不接受选择器字符串，只接受节点引用；parentNode.removeChild(parentNode.querySelector('.item'))才合法 - 现代写法倾向用
node.remove()（IE 不支持）或node.replaceWith(...)，更简洁但兼容性需确认
DOM 操作真正的复杂点，往往藏在“你以为节点还在，其实已被移除”或者“你以为事件绑上了，其实绑在了 documentFragment 上”。动手前多打一行 console.log(node.parentNode)，比查十遍文档更管用。
