最常用且不易出错的方法是用 document.getElementById 获取元素后更新内容，需确保 DOM 加载完成再执行；textContent 安全高效，innerHTML 有 XSS 风险；批量操作用 querySelectorAll + forEach；动态添加节点应使用 createElement 和 appendChild，避免 innerHTML 覆盖事件与状态；dataset 操作自定义属性更直观；注意减少重排重绘以提升性能。
直接用 document.getElementById 获取元素再改内容
这是最常用、也最不容易出错的起点。只要页面上有唯一 id，就能精准定位并更新文本或 HTML。
常见错误是：元素还没加载完就执行 JS，导致 getElementById 返回 null。解决方法是确保脚本在 DOM 加载后运行——把 <script> 放在 </body> 前，或监听 DOMContentLoaded 事件。
-
element.textContent = "新文字"：只更新纯文本，不解析 HTML，安全且快 -
element.innerHTML = "<strong>加粗内容</strong>"：会解析 HTML，但有 XSS 风险，别直接插入用户输入 - 如果元素不存在，后续操作会报
Cannot set property 'textContent' of null，建议先判空：const el = document.getElementById("my-title"); if (el) { el.textContent = "已更新"; }
批量更新多个同类型元素要用 querySelectorAll + forEach
当没有唯一 id，但有一组类名、标签或属性相同时，querySelectorAll 是更灵活的选择。它返回的是 NodeList（不是数组），但现代浏览器支持直接用 forEach 遍历。
注意兼容性：IE 不支持 NodeList.forEach，若需兼容旧版，得转成数组：Array.from(nodeList).forEach(...) 或用传统 for 循环。
立即学习“Java免费学习笔记（深入）”；
- 选所有按钮：
document.querySelectorAll("button.submit") - 选带
data-status="pending"的项：document.querySelectorAll("[data-status='pending']") - 更新时避免重复查询：先存结果，再遍历操作，减少 DOM 查找开销
动态添加新节点必须用 document.createElement 和 appendChild
直接拼接字符串再赋给 innerHTML 看似简单，但会销毁已有绑定的事件监听器、表单状态（比如 <input> 的当前值），还可能触发重排重绘，性能差。
正确做法是创建元素、设置属性、再挂载。这样能保留原有结构逻辑，也方便后续控制。
- 创建并插入一个列表项：
const li = document.createElement("li"); li.textContent = "新任务"; document.querySelector("#task-list").appendChild(li); - 如果要插到开头，用
prepend()；插到指定位置前，用insertBefore(newNode, referenceNode) - 批量插入多个节点时，推荐用
DocumentFragment减少重排次数：const frag = document.createDocumentFragment(); ["A", "B", "C"].forEach(text => { const li = document.createElement("li"); li.textContent = text; frag.appendChild(li); }); document.querySelector("#list").appendChild(frag);
用 dataset 操作自定义属性比 getAttribute 更直观
HTML 中写 <div data-id="123" data-type="user">，JS 里用 element.dataset.id 就能读到 "123"，不用写一长串 getAttribute("data-id")。
注意命名规则：连字符自动转为驼峰，data-user-role → element.dataset.userRole；设值时直接赋字符串，删值用 delete element.dataset.xxx。
- 适合存轻量元数据，比如列表项 ID、状态标识、排序权重
- 不要存大量 JSON 字符串——解析开销大，也不利于调试；复杂数据建议用 Map 或 WeakMap 关联
- 修改
dataset不会触发 DOM 重排，但对应属性变更后，CSS 选择器（如[data-loading="true"]）仍可生效
offsetHeight 再改 style），这些细节比“怎么改”更影响实际体验。 
