textContent 是修改纯文本的首选方式，它不解析HTML、自动转义、不触发重排；innerText受样式影响、行为不一致，现代开发中应避免依赖。
直接用 textContent 设置纯文本最安全，它不解析 HTML、自动转义、不触发重排；innerText 则受样式影响、行为不一致，现代开发中应避免依赖它。
textContent 是修改纯文本的首选方式
它专为纯文本设计，语义清晰、行为稳定、天然防 XSS：
- 读取时：获取元素及其所有后代节点中的**可渲染文本内容**，包括
<script>和<style>内的原始字符，但忽略标签结构和注释 - 写入时：清空当前所有子节点（含 HTML 标签），仅插入转义后的纯文本，不会执行任何脚本或重建 DOM 结构
- 优势明显：不触发浏览器重排、不重置表单控件值（如
<input>的value）、保留空白与换行、跨浏览器行为统一、W3C 标准属性 - 典型用法：
el.textContent = "用户名不能为空"、statusEl.textContent = `共加载 ${count} 条`
innerText 不是 textContent 的兼容替代品
它和 textContent 看似功能相近，但底层逻辑完全不同，不能简单互换：
- 受 CSS 影响：
display: none或visibility: hidden的元素内容不会被计入innerText，而textContent会完整返回 - 格式会被“美化”：自动合并连续空白、折叠换行、模拟用户复制粘贴效果；
textContent则严格保留源码中的空白与结构 - 性能开销大：读取
innerText可能强制触发 layout 计算，在 Safari 等浏览器中尤其明显 - 非标准属性：源于 IE，虽被广泛支持，但各浏览器实现细节不一（如表格单元格、
<input>元素上表现异常）
什么时候该用哪个？关键看需求本质
判断依据不是“要不要兼容老浏览器”，而是“你操作的内容是否需要感知页面呈现状态”：
立即学习“Java免费学习笔记（深入）”；
- 显示错误提示、更新标题、填充日志、展示用户昵称等——全部用
textContent - 需要模拟用户复制行为（比如导出可见文本）、或必须适配 IE8 等极旧环境——才考虑
el.innerText || el.textContent回退，且需充分测试 - 绝对不要用
innerText做 XSS 防护兜底，它既不转义也不可靠；真正需要富文本时，应走 DOMPurify 白名单净化 +innerHTML渲染路径
别踩这些常见坑
实际开发中容易误判的几个点：
- 把
innerText当作“更友好”的textContent使用，结果在隐藏区域漏掉数据或格式错乱 - 在
<textarea>或<input>上读取innerText，得到的是渲染后文本而非真实输入值 - 混用
textContent和innerHTML更新同一元素，导致事件监听器丢失或 DOM 状态异常 - 对用户输入拼接后直接赋给
innerHTML，哪怕只加一个<strong>也构成 XSS 风险
