适合批量更新元素内容的 DOM 方法是 textContent、setAttribute() 和 DocumentFragment；单个文本用 textContent，批量插入用 DocumentFragment 避免重排重绘。
直接修改 innerHTML 最快，但有安全和性能隐患；真正高效且可控的方式是组合使用 textContent、setAttribute() 和 DocumentFragment。
哪些 DOM 方法适合批量更新元素内容？
单个文本更新优先用 textContent，它比 innerHTML 快且不触发 HTML 解析；批量插入多个节点时，DocumentFragment 能避免重复重排重绘。
-
textContent：仅设纯文本，无 XSS 风险，浏览器跳过 HTML 解析，速度最快 -
innerText：受 CSS 影响（如display: none的元素不计入），性能较差，一般不用 -
innerHTML：能插入 HTML，但每次设置都会销毁并重建子节点，触发样式计算和布局，慎用于高频更新 - 批量操作前，先创建
DocumentFragment，把所有新节点 append 进去，最后一次性挂到真实 DOM 上
如何安全又快速地修改元素属性和类名？
直接操作属性比用 setAttribute() 更快，也更语义清晰；类名操作必须用 classList API，而不是拼接字符串。
- 改
id、src、href等标准属性，直接赋值：el.id = "new-id"或el.src = url - 改自定义属性（
data-*）或非标准属性，用el.setAttribute("data-id", "123") - 操作 class：用
el.classList.add("active")、.remove()、.toggle()、.contains()—— 不要写el.className += " active"，会覆盖已有类 - 禁用/启用表单控件：直接设
el.disabled = true，比setAttribute("disabled", "")更可靠
为什么 innerHTML += ... 是危险写法？
它会强制浏览器先序列化当前 HTML（变成字符串），再拼接新内容，最后全部重新解析渲染 —— 既慢又可能意外执行内联脚本或破坏事件监听器。
立即学习“Java免费学习笔记（深入）”；
const container = document.getElementById("list");
// ❌ 危险且低效
container.innerHTML += "<li>Item 1</li>";
// ✅ 正确做法：用 DocumentFragment 或 createElement
const fragment = document.createDocumentFragment();
const li = document.createElement("li");
li.textContent = "Item 1";
fragment.appendChild(li);
container.appendChild(fragment);
更新大量列表时，怎样避免卡顿？
核心是减少重排（reflow）和重绘（repaint）次数。不要逐个 appendChild，也不要反复读取 offsetHeight 这类触发布局的属性。
- 用
document.createDocumentFragment()收集所有新节点，一次插入 - 如果列表项结构固定，考虑用
template标签 +content.cloneNode(true)复用结构 - 更新前临时设
container.style.display = "none"，更新完再恢复（适用于非动画场景） - 极端情况可用
requestIdleCallback()分片更新，但多数业务中用createDocumentFragment已足够
最常被忽略的是：哪怕只改一个文本，也别用 innerHTML；哪怕只加一个 class，也别碰 className 字符串。DOM 操作的“高效”，本质是减少浏览器隐式开销，而不是代码行数少。
