优先用textContent改纯文本，安全高效；innerHTML仅用于插入HTML结构；样式操作推荐classList而非style.cssText；读取真实样式须用getComputedStyle而非el.style。
用 textContent 和 innerHTML 改内容，别混用
改文字内容优先用 textContent，它只处理纯文本，不解析 HTML，安全且快；想插入带标签的结构才用 innerHTML。误用 innerHTML 更新纯文本，可能触发不必要的 HTML 解析，还容易引入 XSS 风险（比如用户输入含 ）。
常见错误：用 innerHTML 给按钮设文字，结果把特殊字符如 & 显示成 & —— 这是双重转义，textContent 能直接避免。
- 改单个元素文字：
el.textContent = "新标题" - 插入 HTML 片段：
el.innerHTML = "加粗文本" - 批量更新多个同类型元素：
document.querySelectorAll(".item").forEach(el => el.textContent = "统一文案")
用 style 对象或 className 控制样式
直接操作 style 属性适合动态、一次性样式调整（比如动画偏移、条件显隐）；用 className 或 classList 更适合开关预定义 CSS 类——它更可维护、支持 CSS 变量和媒体查询，也避免内联样式权重过高导致难覆盖。
注意：CSS 属性名在 JS 中要转为驼峰式，比如 background-color → backgroundColor，font-size → fontSize。
立即学习“Java免费学习笔记（深入）”；
- 设单个样式：
el.style.color = "#333"，el.style.transform = "scale(1.2)" - 加/删类名：
el.className = "active highlight"（全量替换），或更推荐：el.classList.add("active")、el.classList.toggle("hidden") - 慎用
el.style.cssText = "color:red; font-weight:bold"—— 它会清空原有内联样式，容易误删其他脚本设置的样式
getComputedStyle 读取真实样式，别信 style 属性
el.style 只返回内联样式（即 HTML 的 style="..." 或 JS 直接赋值的），查不到 CSS 文件里写的规则或浏览器默认值。要获取最终渲染效果，必须用 getComputedStyle(el)。
典型踩坑：元素宽度设为 width: 100%，el.style.width 是空字符串，但 getComputedStyle(el).width 返回 "240px"（实际计算值）。
- 读取计算后颜色（含继承值）：
getComputedStyle(el).color→"rgb(51, 51, 51)" - 读取 transform 矩阵：
getComputedStyle(el).transform→"matrix(1, 0, 0, 1, 0, 0)" - 注意：该方法返回只读对象，不能直接赋值修改
批量操作 DOM 前先 detach，避免频繁重排
连续多次修改同一组元素的内容或样式（比如循环设 textContent + style.color），浏览器可能反复重排重绘，性能明显下降。尤其在 for 循环里操作 innerHTML 或读写 offsetHeight，极易触发强制同步布局。
简单解法：用 DocumentFragment 暂存节点，或先把父元素 display: none，改完再恢复；对列表类操作，优先用 innerHTML 一次写入完整 HTML 字符串，而非逐个 appendChild。
const fragment = document.createDocumentFragment();
items.forEach(item => {
const li = document.createElement("li");
li.textContent = item.name;
li.className = "list-item";
fragment.appendChild(li);
});
listElement.appendChild(fragment); // 仅一次真实 DOM 插入
改样式和内容本身不难，难的是判断该用哪个 API、什么时候该避免触发布局、以及如何让 JS 修改和 CSS 规则协同而不是打架。特别是 getComputedStyle 和 style 的差异，很多人调试半天才发现读的是空值。 
