优先用 document.getElementById 或 document.querySelector 获取单个 DOM 元素；修改内容用 textContent（安全）或 innerHTML（需可信）；绑定事件用 addEventListener 并善用事件委托；确保 DOM 加载完成后再操作。
直接用 document.querySelector 或 document.getElementById 获取元素，再通过属性或方法修改内容、样式、事件——这是最常用也最稳
document.getElementsByTagName 然后遍历，容易漏节点或误操作。
如何精准获取单个 DOM 元素
优先用 document.getElementById（ID 唯一且性能最快），其次用 document.querySelector（支持 CSS 选择器，语义清晰）。避免用 getElementsByClassName 或 getElementsByTagName 返回类数组，它们不支持链式调用，且返回值是实时集合，后续 DOM 变化可能影响你预期的长度或索引。
-
document.getElementById('header')→ 直接得元素，不存在则返回null -
document.querySelector('.btn.active')→ 返回第一个匹配项，没匹配到也是null - 别写
document.querySelectorAll('.item')[0]去代替querySelector，多一次遍历，没必要
修改内容和属性时要注意什么
innerHTML 和 textContent 行为差异极大：前者会解析 HTML 字符串，有 XSS 风险；后者纯文本，安全但不渲染标签。设置 src、href、className 等属性，必须用点语法或 setAttribute，别混用 class（HTML 属性名）和 className（JS 属性名）。
- 插入用户输入内容？一律用
textContent或innerText - 要插入带标签的结构？确保内容可信，再用
innerHTML；否则先用document.createElement拼接 -
el.className = 'new-class'会覆盖全部 class；追加要用el.classList.add('new-class')
绑定事件为什么推荐使用 addEventListener
onclick 属性只能绑定一个处理函数，重复赋值会覆盖；而 addEventListener 支持多次绑定、可移除、可设捕获阶段。另外，事件委托（如在父容器监听 click，用 event.target 判断来源）能显著减少内存占用，尤其适合动态增删子元素的场景。
- 不要写
btn.onclick = handler1; btn.onclick = handler2;—— 后者会干掉前者 - 正确写法：
btn.addEventListener('click', handler, { once: true })，{ once: true }表示执行一次自动解绑 - 动态列表？绑定到
ul上，检查event.target.matches('li.delete-btn')
const list = document.querySelector('#task-list');
list.addEventListener('click', (e) => {
if (e.target.matches('button.delete')) {
e.target.closest('li').remove();
}
});
DOM 操作本身不难，真正容易出问题的是时机和引用失效：比如脚本放在 里就去查 #app，结果拿到 null；或者保存了某个元素引用，之后它被 innerHTML 重写，引用就变成“孤儿节点”。确保脚本在 DOMContentLoaded 后执行，对可能被替换的元素，要么重新查询，要么用事件委托绕过直接引用。
