17370845950

最稳做法是用 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 }）。

• 别用 onclick="handle()" 或 elem.onclick = fn ——它们只能存一个处理器，且难以解绑
• 事件委托很实用：给父容器绑定 click，再用 event.target 判断实际点击的是哪个子元素，适合动态列表
• 表单提交记得调 event.preventDefault()，否则页面会跳转或刷新
• 如果监听的是滚动/拖拽等高频事件，考虑加节流（setTimeout + 标志位）或用 { passive: true } 提升性能

常见报错和排查方向

大部分 DOM 操作失败，根源就三个：元素不存在、执行时机太早、作用域搞错。

• Cannot read property 'addEventListener' of null → querySelector 返回了 null，先 console.log 确认元素是否存在
• 脚本放在 里但没加 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);
  }

D

OM 操作本身不难，难的是时刻意识到“它不是同步渲染的”，也不是“你写了就一定在那儿”。多打几行 console.log，少信直觉。