优先用 document.queryselector 而非 getelementbyid，因其支持 css 选择器、更灵活安全；确保 dom 就绪再操作；更新文本用 textcontent 防 xss；绑定事件用 addeventlistener 避免覆盖；批量操作用 documentfragment 提升性能。
获取元素用 document.querySelector 而不是 document.getElementById
多数场景下，document.querySelector 更灵活、更接近实际开发需求——它支持 CSS 选择器语法，能按类名、属性、嵌套关系精准定位，而 document.getElementById 只能靠 ID，且 ID 在现代组件化结构里常动态生成或不唯一。
常见错误现象：document.getElementById 返回 NULL，但元素明明在页面上；其实是 ID 拼写错、大小写不一致，或元素尚未加载完成就执行了 js。
- 优先用
document.querySelector('.btn-submit')或document.querySelector('[data-testid="save-btn"]') - 确保 DOM 已就绪：把操作逻辑放在
DOMContentLoaded事件里，或用setTimeout简单兜底（仅调试用） - 多个匹配时，
querySelector只返回第一个；要全部匹配，改用document.querySelectorAll，它返回NodeList，不是数组，需转成数组才能用map、foreach
修改内容别直接拼 html 字符串，用 textContent 或 innerText
用 innerHTML = '<span>hello</span>' 看似快，但容易引入 XSS 风险，也绕过浏览器对非法 HTML 的自动修正逻辑。纯文本更新，textContent 是最安全、性能最好的选择。
使用场景：填表单提示、渲染用户输入的昵称、显示 API 返回的描述字段。
立即学习“前端免费学习笔记（深入）”；
-
el.textContent = '用户名不能为空'—— 安全、高效、不触发重排 -
el.innerText会受 CSS 影响（比如隐藏元素不计入），一般不用；只有需要模拟用户视觉读取行为时才考虑 - 真要插 HTML，必须先做转义（如用
DOMPurify.sanitize(html)），或者用template+appendChild手动构造节点
绑定事件用 addEventListener，避免覆盖和内存泄漏
直接写 el.onclick = handler 最大的问题是：重复赋值会覆盖前一个 handler；而且无法控制捕获/冒泡阶段，也不方便解绑。
常见错误现象：点击按钮没反应，查半天发现是别的模块也给同一个元素绑了 onclick，后写的把前写的干掉了。
- 始终用
el.addEventListener('click', handler)，支持多次绑定、独立触发 - 需要解绑时，必须用相同引用的函数：不能写
el.addEventListener('click', () => {...})，否则无法removeEventListener；应提前声明函数变量 - 监听器里避免闭包持有大对象（如整个 Vue 实例），否则可能阻止 GC，造成内存泄漏
批量 DOM 操作尽量用 DocumentFragment 或离线父容器
循环中反复调用 appendChild、insertBefore 会频繁触发重排重绘，性能差得明显，尤其在列表项多（>50 条）时。
性能影响：100 次单独插入可能比 1 次批量插入慢 5–10 倍，chrome DevTools 的 Rendering 面板能直观看到 Layout 波峰。
- 简单方案：创建空
div元素，innerHTML一次性写入所有子节点，再appendChild到真实 DOM - 更规范做法：用
document.createDocumentFragment()，把节点 append 进去，最后只执行一次真实 DOM 插入 - 注意：
DocumentFragment不在 DOM 树中，所以对它的操作不会触发重排
事情说清了就结束。真正难的不是记住这几个方法，而是每次写 el.innerHTML = data 之前，多想半秒——这数据可信吗？这个元素此刻一定存在吗？这次操作会不会让滚动条跳、让动画卡顿？