优先用 querySelector，它支持 CSS 选择器语法，灵活且可读性强；只有在明确知道 ID 唯一且稳定时才用 getElementById。
怎么用 querySelector 和 getElementById 获取元素
获取元素是 DOM 操作的第一步，选错方法会导致后续所有修改无效。优先用 querySelector，它支持 CSS 选择器语法，灵活且可读性强；只有在明确知道 ID 唯一且稳定时，才用 getElementById——它性能略高，但不支持伪类或复合选择。
常见错误：用 getElementsByClassName 返回 HTMLCollection 后直接调用 .innerHTML，结果报错 undefined is not a function，因为它返回的是类数组，不是单个元素。
- 要改第一个匹配项：
document.querySelector('.item').innerHTML = '新内容' - 要批量改多个：
document.querySelectorAll('.item').forEach(el => el.textContent = '统一文本') - ID 存在但取不到？检查脚本是否在 DOM 加载前执行——把代码放在
底部，或包裹在DOMContentLoaded事件里
修改内容该用 textContent 还是 innerHTML
二者核心区别在于是否解析 HTML 字符串。textContent 只当纯文本处理，安全、快、防 XSS；innerHTML 会重新解析并渲染 HTML 结构，功能强但有风险。
比如后端返回一段带 的富文本，又确认来源可信，才用 innerHTML；如果只是填用户昵称、日期这类纯数据，一律用 textContent。
- 拼接 HTML 字符串时，注意引号嵌套：
el.innerHTML = `${data}`（推荐模板字符串） - 用
innerHTML +=是反模式——会触发整段 HTML 重解析，性能差，还可能清空已绑定的事件监听器 - 想插入带样式的片段又不想 XSS？先用
textContent设值，再用classList.add()控制样式
动态添加/删除元素为什么事件失效了
用 appendChild 或 insertAdjacentHTML 添加的新节点，如果依赖委托之外的事件监听，原绑定的 addEventListener 不会自动生效——因为监听器只挂载在旧节点上。
解决方式不是给每个新元素重复绑定，而是用事件委托：把监听器挂在父容器，通过 e.target 判断实际点击的是哪个子元素。
- 正确委托写法：
parent.addEventListener('click', e => { if (e.target.matches('button.delete')) handleDelete(e.target.dataset.id) }) - 避免用
onclick="..."内联写法，它难以维护，且无法访问闭包变量 - 删元素别只用
removeChild，现代写法直接调el.remove()，更简洁
style 和 classList 哪个更适合控制样式
直接操作 element.style.xxx 适合临时、一次性样式（比如动画位移、显隐切换），但会覆盖 CSS 文件里的同名规则，且难以复用和维护；classList 是标准做法，语义清晰、支持多类切换、不干扰外部样式表。
- 加类：
el.classList.add('active', 'highlight') - 切换单个状态：
el.classList.toggle('collap
sed')
- 移除多个类：
el.classList.remove('error', 'pending') - 慎用
element.style.cssText = 'color: red; font-size: 14px;'——它会清空所有内联样式，包括其他 JS 设置的
真实项目里，DOM 操作的麻烦往往不在语法，而在时机判断和状态同步——比如异步加载数据后更新列表，却忘了清空旧内容；或者多次触发同一操作，导致重复添加节点。这些细节比“怎么写”更决定页面是否稳定。
