现代 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.classList.remove('idle');
btn.classList.toggle('disabled'); // 有则删，无则加
btn.classList.contains('success'); // 判断是否存在
优势明显：
立即学习“Java免费学习笔记（深入）”；
- 原子操作，不会误删其他 class
- 支持链式调用（
classList.add('a').remove('b')） - 兼容性好（IE10+），比
className.split().includes()更可靠 - 配合 CSS 过渡动画时，class 增删会触发重排/重绘，比内联样式更利于性能优化
事件绑定别用 onclick 属性，用 addEventListener 并留意事件委托
写 <button onclick="handleClick()"></button> 看似简单，实则破坏结构与逻辑分离，且无法移除或复用。统一走 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。
