现代 DOM 操作首选 querySelector 和 querySelectorAll，支持完整 CSS 选择器语法；注意判空、NodeList 非数组、事件委托用 event.target.matches()、修改内容优用 textContent、交互反馈用 classList 配合 CSS 过渡。
用 querySelector 和 querySelectorAll 精准定位元素，别再滥用 getElementById
多数人习惯用 getElementById 或 getElementsByClassName，但它们要么要求 ID 唯一（易冲突），要么返回类数组且不支持链式操作。现代 DOM 操作首选 querySelector（返回第一个匹配）和 querySelectorAll（返回静态 NodeList）。它们支持完整 CSS 选择器语法，可直接写 div[data-tab="active"] > button:enabled 这类表达式。
注意：返回的 NodeList 不是 Array，不能直接调用 .map() 或 .forEach()（除非用 Array.from() 转换）；而 querySelector 找不到时返回 null，必须判空，否则调用 .addEventListener 会报 Cannot read property 'addEventListener' of null。
事件委托用 addEventListener 绑定到父容器，避免重复绑定和内存泄漏
动态插入的按钮、列表项、卡片等，如果每个都单独绑 click，不仅性能差，还容易因 DOM 删除后监听器未清理导致内存泄漏。正确做法是把事件监听器挂在稳定父节点上，利用事件冒泡 + event.target 判断来源。
- 必须使用
event.target，不是event.currentTarget（后者始终是父容器） - 用
matches()方法做选择器校验，比如if (event.target.matches('button.delete')) { ... } - 不需要手动
removeEventListener—— 只要父容器存在，一个监听器管全部；父容器被移除时，监听器自动失效
修改内容优先用 textContent，仅当需 HTML 解析时才用 innerHTML
textContent 是最安全、最快的方式：它把字符串当纯文本插入，自动转义 、<code>& 等字符，杜绝 XSS 风险，且不触发 HTML 解析和重排。而 innerHTML 会重新解析整个子树，开销大，且若拼接用户输入（如 innerHTML = '<div>' + userInput + '</div>'）极易引入脚本执行漏洞。
立即学习“Java免费学习笔记（深入）”；
例外场景只有两个：
– 需要插入带标签的富文本（如编辑器预览）
– 需要保留原有子节点结构并只替换其中一部分（此时可用 insertAdjacentHTML 替代全量重写）
批量 DOM 更新用 DocumentFragment 或 display: none 临时隐藏，减少重排重绘
连续调用 appendChild、insertBefore 多次，每次都会触发浏览器计算布局（reflow）和绘制（repaint），卡顿明显。解决方案有两个：
- 用
DocumentFragment作为离屏容器，所有新增节点先加到它里面，最后一次性 append 到真实 DOM：const frag = document.createDocumentFragment(); items.forEach(item => { const el = document.createElement('li'); el.textContent = item; frag.appendChild(el); }); listElement.appendChild(frag); - 对已存在的容器，可先设
el.style.display = 'none'，批量修改后再设回'block'（或原值），强制浏览器合并渲染
注意：不要用 visibility: hidden 替代 —— 它仍占布局空间，不影响重排，但无法避免重绘；而 display: none 才真正脱离渲染流。
交互反馈别只靠 alert() 或控制台，用 classList.toggle() 配合 CSS 过渡更自然
用户点击按钮后，应立刻给出视觉反馈（比如按钮变灰、加 loading 动画、显示 tooltip），而不是等异步完成才动。常见错误是直接改 style.color 或拼接 className 字符串，既难维护又无法利用 CSS transition。
正确方式是用 element.classList.add() / .remove() / .toggle() 控制 class，并在 CSS 中定义状态样式和过渡效果：
.btn {
transition: opacity 0.2s, background-color 0.2s;
}
.btn.loading {
opacity: 0.7;
background-color: #ccc;
}然后 JS 中：button.classList.add('loading') —— 这样动画由浏览器原生处理，顺滑且省 CPU。
特别提醒：CSS 过渡属性必须写在初始 class（如 .btn）里，不能只写在目标 class（如 .loading）中，否则过渡不会生效。
