javascript如何操作DOM_哪些方法可以高效地更新页面元素？_技术教程

适合批量更新元素内容的 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 += "Item 1";

// ✅ 正确做法：用 DocumentFragment 或 createElement
const fragment = document.createDocumentFragment();
const li = document.createElement("li");
li.textContent = "Item 1";
fragment.appendChild(li);
container.appendChild(fragment);