最稳做法是用 querySelector 选元素、addEventListener 绑事件；选元素用 #id、.class、[attr] 等 CSS 选择器；动态插入需插入后查询；改文本用 textContent，改 HTML 用 innerHTML；样式操作优先用 style.xxx 或 classList；事件必须用 addEventListener，支持多次绑定与选项，避免内联 onclick；高频事件需节流或 passive；常见错误源于元素不存在、时机过早或作用域错误，务必检查 null 并合理控制执行时机。
直接用 document.querySelector 选元素，用 addEventListener 绑事件，别碰 onclick 这类内联属性——这是最稳、最现代的做法。
怎么选到想要的 DOM 元素
核心就两个 API：querySelector 和 querySelectorAll。前者返回第一个匹配项（null 表示没找到），后者返回 NodeList（不是数组，但可遍历）。
- 用
#header选 ID，.btn选 class，button[data-action]选带特定属性的元素 - 避免用
getElementById等老方法——语法冗长，且不支持复杂选择器 - 如果元素是动态插入的（比如通过
innerHTML添加），确保在插入后才调用querySelector，否则查不到 -
querySelector不会实时响应 DOM 变化，它只看当前快照
修改元素内容和样式时要注意什么
改文本用 textContent，改 HTML 用 innerHTML；设样式优先用 element.style.xxx 或 classList，别直接拼 style 字符串。
-
textContent是安全的，自动转义，防 XSS；innerHTML会解析标签，有风险，只在可信内容下用 - 批量切样式推荐
element.classList.add("active")、.toggle()、.contains()，比操作className字符串靠谱得多 - 不要写
elem.style = "color: red;"——这会覆盖全部内联样式，正确写法是elem.style.color = "red"
事件监听必须用 addEventListener
所有交互逻辑都该走 addEventListener，包括点击、输入、提交等。它支持多次绑定同一事件，也支持选项（如 { once: true, passive: true }）。
立即学习“Java免费学习笔记（深入）”；
- 别用
onclick="handle()"或elem.onclick = fn——它们只能存一个处理器，且难以解绑 - 事件委托很实用：给父容器绑定
click，再用event.target判断实际点击的是哪个子元素，适合动态列表 -
表单提交记得调
event.preventDefault()，否则页面会跳转或刷新 - 如果监听的是滚动/拖拽等高频事件，考虑加节流（
setTimeout+ 标志位）或用{ passive: true }提升性能
常见报错和排查方向
大部分 DOM 操作失败，根源就三个：元素不存在、执行时机太早、作用域搞错。
-
Cannot read property 'addEventListener' of null→querySelector返回了null，先console.log确认元素是否存在 - 脚本放在
<head>里但没加defer→ DOM 还没加载完就执行了查询，要么移脚本到底部，要么用DOMContentLoaded包一层 - 用箭头函数绑事件时，
this指向不对 → 改用普通函数，或明确传参（e.target总是对的） -
Uncaught TypeError: Cannot set property 'xxx' of null→ 忘了检查元素是否存在，建议统一加空值判断：const btn = document.querySelector('.submit-btn'); if (btn) { btn.addEventListener('click', handler); }
DOM 操作本身不难，难的是时刻意识到“它不是同步渲染的”，也不是“你写了就一定在那儿”。多打几行 console.log，少信直觉。
