最稳妥的DOM查询方式是querySelector和querySelectorAll。前者返回首个匹配元素，后者返回NodeList；需注意选择器语法、加载时机、遍历操作及避免过度嵌套。
用 document.querySelector 和 document.querySelectorAll 获取元素最稳妥
多数人一上来就用 getElementById，但实际项目里 ID 容易重复或缺失，反而让逻辑出错。现代写法优先选 querySelector：支持 CSS 选择器语法，可读性强，兼容性也早不是问题（IE8+）。querySelector 返回第一个匹配项，querySelectorAll 返回 NodeList（不是数组，但能用 forEach）。
常见错误：
– 写错选择器，比如把类名写成 .btn-primary 却漏了点，结果返回 null；
– 拿到 NodeList 后直接调 .style.color = 'red'，报错——得遍历每个节点再操作。
实操建议：
– 页面加载完再查，否则可能查不到：用 DOMContentLoaded 或把脚本放 </body> 前；
– 查不到时先 console.log 看返回值，别假设一定有；
– 避免过度嵌套选择器，比如 div > ul > li:nth-child(2) a，维护成本高，优先加 class 或 data 属性定位。
修改内容用 textContent，改 HTML 用 innerHTML，但别混用
textContent 只处理纯文本，安全、快、不触发 HTML 解析；innerHTML 会解析字符串为 DOM 节点，功能强但有 XSS 风险，且频繁设置会重排重绘。
立即学习“Java免费学习笔记（深入）”；
使用场景：
– 显示用户输入的内容（如评论、搜索关键词），一律用 textContent；
– 动态插入带标签的结构（如一个按钮 + 图标），才用 innerHTML；
– 想清空某容器所有子节点？el.innerHTML = '' 最简，比循环 removeChild 实用得多。
容易踩的坑：
– 把 innerHTML 当万能方案，结果用户输入 <script>alert(1)</script> 执行了；
– 用 textContent 设置含换行符的字符串，发现页面没换行——因为 textContent 不解析 \n，要配合 CSS 的 white-space: pre-wrap。
改样式优先操作 className 或 classList，少碰 style
直接写 el.style.color = 'blue' 看似简单，但副作用大：它只改内联样式，覆盖不了 CSS 文件里的规则，还容易和其他 JS 逻辑冲突，调试时样式来源难追溯。
推荐做法：
– 静态样式写在 CSS 文件里，JS 只负责开关 class：el.classList.add('active')、el.classList.toggle('hidden')；
– 需要批量操作多个 class，用 classList.replace() 或 classList.add(...['a', 'b'])；
– 真要动态算数值（比如根据滚动位置设 opacity），再用 style，但记得加单位：el.style.opacity = 0.7 正确，el.style.opacity = '0.7' 也行，但 el.style.left = 100 就失效（缺 'px'）。
事件绑定别用 onclick 属性，统一走 addEventListener
el.onclick = handler 或 HTML 里写 onclick="doSomething()" 是反模式：只能绑一个监听器，后绑的会覆盖前一个；无法控制捕获/冒泡阶段；不利于解绑和测试。
正确姿势：
– 用 el.addEventListener('click', handler)，支持多次绑定；
– 需要解绑时存住函数引用：const fn = () => {}; el.addEventListener('click', fn); el.removeEventListener('click', fn)；
– 动态生成的元素（如列表项），别给每个都绑事件，用事件委托：list.addEventListener('click', e => { if (e.target.matches('.delete-btn')) { /* 处理删除 */ } })。
性能提示：频繁触发的事件（如 scroll、mousemove）务必加节流或用 { passive: true } 提升滚动流畅度。
DOM 操作本身不难，真正卡住人的，往往是没想清楚“谁该负责什么”——样式归 CSS，结构归 HTML，行为归 JS，三者边界模糊时，bug 就藏在缝隙里。
