JavaScript 动态修改 DOM 文本应优先使用 textContent，它安全高效、防 XSS 且兼容性好；避免 innerText（行为不一致、性能差），慎用 innerHTML（仅需插入 HTML 时）。
JavaScript 中动态修改 DOM 元素的内部文本，核心是先获取目标元素，再用合适的方法更新其文本内容。最常用、最推荐的是 textContent，它安全、高效、标准兼容性好。
用 textContent 设置纯文本（推荐）
textContent 直接设置或读取元素及其所有子节点的纯文本内容，不解析 HTML 标签，也不会触发 HTML 解析，因此：
- 自动防止 XSS 攻击（用户输入会被原样显示，不执行）
- 性能优于 innerHTML（无 HTML 解析开销）
- 获取时包含隐藏元素内的文本（如
display: none的子元素）
示例：
const el = document.getElementById("title");el.textContent = "欢迎来到首页";
避免用 innerText（不推荐）
innerText 虽然也能改文本，但它：
立即学习“Java免费学习笔记（深入）”；
- 只返回“视觉上可见”的文本（受 CSS 隐藏、换行、缩进等影响）
- 在不同浏览器中行为不一致（非 W3C 标准）
- 读取时会触发重排（reflow），影响性能
- 写入时可能意外改变空白符和换行格式
除非明确需要模拟用户视觉所见（极少见），否则不用 innerText。
慎用 innerHTML（仅当需插入标签时）
innerHTML 可以插入带 HTML 标签的内容，但不是修改纯文本的正确方式：
- 若传入纯文本字符串（如
"<p>Hello</p>"），它仍会解析并创建新 DOM 节点 - 若内容来自用户输入，未转义则存在 XSS 风险
- 频繁使用会引发不必要的重绘，且破坏原有事件绑定
仅在确实需要渲染 HTML 结构时才用，例如：
el.innerHTML = "<em>强调文本</em>";操作前必须先获取元素
修改文本前，得准确拿到 DOM 节点。常用方法：
-
document.getElementById("id")—— ID 唯一，最快 -
document.querySelector(".class")—— 支持 CSS 选择器，灵活 -
document.querySelectorAll("li")[0]—— 获取多个后取其一
建议缓存查询结果，避免重复查找：
const header = document.querySelector("h1");header.textContent = "新标题";
