17370845950

现代 DOM 操作首选 querySelector 系列，支持 CSS 选择器语法，querySelector 返回首个匹配元素，querySelectorAll 返回静态 NodeList；操作 class 用 classList API 更安全可靠；事件绑定用 addEventListener 并善用事件委托；修改内容优先用 textContent 防 XSS，data 属性用 dataset 访问。

用 querySelector 和 querySelectorAll 选元素，别再只靠 getElementById

现代 DOM 操作首选 querySelector 系列，它支持 CSS 选择器语法，灵活度远超老式方法。比如要选所有带 data-status="active" 的按钮，写 document.querySelector('button[data-status="active"]') 就行；批量获取则用 querySelectorAll，返回的是 NodeList（不是数组，但可遍历）。

注意点：

• querySelector 只返回第一个匹配项，哪怕页面有多个也只取一个
• querySelectorAll 返回静态节点列表，后续 DOM 变化不影响已有结果
• 别在循环里反复调用 querySelector 查同一类元素——先存变量，避免重复解析
• IE8+ 支持，但伪类如 :has() 是新特性，Chrome 105+ 才可用

给元素加动态效果，优先用 classList 而非拼接 className

直接改 element.className = 'fade in active' 容易覆盖原有 class，且难维护。正确做法是用 classList API：

const btn = document.querySelector('.submit-btn');
btn.classList.add('loading');
btn.c
lassList.remove('idle');
btn.classList.toggle('disabled'); // 有则删，无则加
btn.classList.contains('success'); // 判断是否存在

优势明显：

• 原子操作，不会误删其他 class
• 支持链式调用（classList.add('a').remove('b')）
• 兼容性好（IE10+），比 className.split().includes() 更可靠
• 配合 CSS 过渡动画时，class 增删会触发重排/重绘，比内联样式更利于性能优化

事件绑定别用 onclick 属性，用 addEventListener 并留意事件委托

写 看似简单，实则破坏结构与逻辑分离，且无法移除或复用。统一走 addEventListener：

const container = document.querySelector('#list');
container.addEventListener('click', (e) => {
  if (e.target.matches('li.edit')) {
    editItem(e.target.dataset.id);
  }
});

关键细节：

• 用 e.target.matches(selector) 判断点击目标是否符合预期，避免层层 if 判断
• 动态添加的元素（如 AJAX 加载的新列表项）也能响应，无需重新绑定
• 记得在不需要时调用 removeEventListener，尤其监听滚动、输入等高频事件，否则内存泄漏风险高
• 如果监听表单提交，别忘了 e.preventDefault() 阻止默认刷新行为

修改内容和属性，分清 textContent、innerHTML 和 dataset

三者用途差异大，混用容易出安全或渲染问题：

• textContent：纯文本，不解析 HTML，防 XSS 最简单手段。适合填标题、提示文字等
• innerHTML：解析 HTML 字符串，能插入标签，但必须确保内容可信。用户输入后直接赋值有严重 XSS 风险
• dataset：专用于读写 data-* 属性，比如 el.dataset.userId = '123' 自动映射为 data-user-id="123"，比 setAttribute 更语义化

常见错误：

• 用 innerHTML 渲染用户评论却不做转义 —— 应该先用 textContent 或服务端过滤
• 读 data-id 写成 el.getAttribute('data-id') —— 直接用 el.dataset.id 更简洁、自动处理驼峰转换
• 频繁修改 innerHTML 触发多次重排 —— 大量更新建议用 DocumentFragment 或一次性替换

DOM 动态效果真正难的不是语法，而是对节点生命周期、事件流顺序、重排重绘时机的感知。写完一段交互，不妨打开 Chrome DevTools 的 Rendering 面板，看看是不是在 scroll 里偷偷触发了 layout。