document.querySelector 更灵活可靠，支持 CSS 选择器，返回首个匹配元素且语义明确；需判空防 null 错误；优先用 textContent 改文本，innerHTML 仅限需解析 HTML 时；添加元素禁用 innerHTML +=，改用 appendChild 或 insertAdjacentElement；事件绑定必须用 addEventListener。
获取元素用 document.querySelector 而不是 document.getElementById
绝大多数场景下，document.querySelector 更灵活、更可靠。它支持 CSS 选择器语法，能直接写 #header、.btn.active、input[name="email"]，不用额外加 ID 或 class 判断逻辑。document.getElementById 只能按 ID 查，且 ID 重复时行为未定义（多数浏览器返回第一个），而 querySelector 明确返回匹配的第一个元素，语义清晰。
注意点：
-
querySelector找不到时返回null，不抛错；但后续调用.innerText等会报Cannot read property 'innerText' of null—— 务必先判空 - 需要所有匹配项？改用
document.querySelectorAll，它返回NodeList（非数组，但可用[...nodeList]展开） - 避免用
getElementsByClassName或getElementsByTagName：它们返回的是「实时集合」（live collection），DOM 变化会自动更新内容，容易引发意料外的循环或性能问题
修改内容优先用 textContent，仅当需渲染 HTML 时才用 innerHTML
textContent 设置纯文本，安全、快、不触发 HTML 解析；innerHTML 会解析字符串为 DOM，有 XSS 风险，且开销大。除非你明确要插入带标签的结构（比如从服务端返回一段预格式化 HTML），否则一律用 textContent。
常见误用：
- 把用户输入直接拼进
innerHTML→ 可能执行恶意脚本 - 只改文字却用了
innerHTML→ 多余重排重绘，还清空子元素绑定的事件监听器 - 想保留原有 HTML 结构但只改其中某段文本 → 应定位到具体文本节点操作，或用
replaceChild+document.createTextNode
const el = document.querySelector('.title');
el.textContent = '新标题'; // ✅ 安全、高效
el.innerHTML = '新标题'; // ⚠️ 仅当真需要解析 HTML 时才用
添加/删除元素别用 innerHTML +=，改用 appendChild 或 insertAdjacentElement
innerHTML += 看似简洁，实则危险：它会把整个容器的 HTML 全部序列化 → 清空 → 重新解析插入。所有已绑定的事件监听器丢失，表单控件状态（如 的 value、focus 状态）重置，还可能触发多次 layout/reflow。
正确做法：
- 追加一个新元素：用
parent.appendChild(newEl)或parent.append(newEl)（后者支持多个参数，且可传字符串） - 插入到指定位置：用
el.insertAdjacentElement('beforeend', newEl)（等价于appendChild），或'afterbegin'/'beforebegin'/'afterend' - 批量插入多条数据：先用
document.createDocumentFragment()收集所有节点，再一次性appendChild，避免反复重排
事件绑定必须用 addEventListener，禁用 onclick 属性或 on* 行内写法
onclick="doSomething()" 或 el.onclick = handler 最大问题是：只能绑定一个处理函数，后赋值会覆盖前一个。而 addEventListener 支持无限叠加，还能控制捕获/冒泡阶段、是否自动移除（{ once: true }）、是否阻止默认行为（{ passive: true } 在滚动事件中尤其重要）。
典型陷阱：
- 在循环中给多个元素绑事件，用
var声明循环变量 → 所有回调共享同一个i值 → 全部取到最后的索引。改用let或闭包封装 - 动态添加的元素没绑上事件 → 用事件委托：在父级监听，用
e.target.matches('.item')判断来源 - 忘记解绑导致内存泄漏 → 特别是单页应用中长期存在的容器，应在销毁前调用
removeEventListener（需保留原函数引用）
const btn = document.querySelector('#save');
btn.addEventListener('click', function(e) {
e.preventDefault();
console.log('已提交');
});
DOM 操作真正的复杂点不在 API 数量，而在「时机」和「所有权」：元素是否已挂载？是否已被其他代码移除？事件监听器由谁负责清理？这些隐性依赖比方法名难查得多。
