dom操作重在安全高效可维护：优先用textContent防xss与重排，getElementById因底层索引比querySelector快且稳妥，动态元素须用事件委托，批量修改应避免频繁重排重绘。
DOM 操作不是“要不要做”的问题，而是“怎么安全、高效、可维护地做”的问题——直接用 innerhtml 或 document.write() 改页面，短期见效快，长期容易引发内存泄漏、事件丢失、XSS 风险和渲染阻塞。
获取元素时为什么 getElementById 比 querySelector 更快且更稳妥？
浏览器对 getElementById 有底层 ID 索引优化，只要 ID 唯一（且符合 HTML 规范），查找就是 O(1)；而 querySelector 是通用 css 选择器引擎，哪怕写成 querySelector('#my-id')，内部仍要走完整解析流程，还可能匹配到动态插入的同 ID 元素（HTML 不允许重复 ID，但 js 不校验）。
- ID 必须是合法标识符：不能以数字开头，不能含空格或特殊符号（如
my-element合法，1st-item不合法） - 如果元素尚未加载完成，
getElementById返回NULL—— 务必加判空，不要假设它一定存在 -
querySelector在需要复杂条件时才用，比如querySelector('button[data-action="save"]:not([disabled])')
textContent 和 innerText 改文字，到底该选哪个？
优先用 textContent。它直接操作 DOM 节点的文本内容，不触发重排，不依赖样式，返回值包含所有子节点文本（包括 display: none 的），且能正确处理 Unicode 和换行符。而 innerText 会受 CSS 影响（比如隐藏元素不计入）、会触发回流、在 firefox 中对换行处理不一致。
- 设纯文本：
el.textContent = 'Hello→ 页面显示' Hello（自动转义，无 XSS） - 想保留 HTML 结构？用
innerHTML，但必须确保内容可信，或先用DOMPurify.sanitize()过滤 - 不要用
innerText做数据提取——它可能漏掉不可见文本，也不跨浏览器一致
动态添加按钮后，点击事件没反应？你可能漏了事件委托
直接给每个新按钮绑 addEventListener 不仅冗余，还会在频繁增删时导致事件监听器堆积。正确做法是把事件监听器挂在父容器上，利用事件冒泡捕获目标：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('list').addEventListener('click', function(e) { if (e.target.matches('button.delete')) { e.target.closest('li').remove(); } });- 父容器必须存在且生命周期长于子元素（推荐用
body或稳定 ID 容器） - 用
e.target.matches(selector)判断是否命中目标，比className.includes更可靠 - 避免用
onclick="..."内联写法——无法动态管理，污染 HTML，且 this 指向不可控
最常被忽略的点：DOM 操作本身不慢，慢的是频繁触发重排（reflow）和重绘（repaint）。批量修改（比如用 DocumentFragment 组装完再 append）、避免循环中读写 offsetHeight、用 transform 替代 top/left 动画——这些细节不写在教程里，但决定着用户滚动是否卡顿、列表是否闪屏。