innerText 返回用户可见文本，忽略隐藏元素及格式空白；textContent 返回所有文本节点原始内容，包含隐藏内容与精确空白。

innerText 只读取浏览器渲染后“真正可见”的文本，会忽略隐藏元素（display: none、visibility: hidden）、注释、script/style 标签内容，且受 CSS 行高、换行、空格折叠影响；textContent 则返回 DOM 节点树中所有文本节点的原始字符串，不关心样式是否隐藏，也不受排版规则影响。

哪些情况会让 innerText 和 textContent 返回不同结果

以下 HTML 片段可直观体现差异：

<div id="box">
  <p>可见文字</p>
  <p style="display:none">被隐藏的文字</p>
  <p style="visibility:hidden">不可见但占位的文字</p>
  <span>  多空格  </span>
</div>

• textContent 返回："可见文字被隐藏的文字不可见但占位的文字  多空格  "（保留所有空格、换行、隐藏内容）
• innerText 返回："可见文字"（跳过隐藏元素，合并多余空白，忽略 visibility: hidden 内容）

visibility: hidden 和 display: none 的处理差异

innerText 对两者都忽略——只要没在视觉上渲染出来，就不计入；而 textContent 一视同仁，只看 DOM 结构是否存在文本节点。

• display: none 元素：DOM 中存在，但不参与渲染 → innerText 跳过，textContent 包含
• visibility: hidden 元素：仍占据布局空间，但不可见 → innerText 同样跳过（Chrome/Firefox 均如此），textContent 仍包含

换行与空白字符的实际表现

innerText 模拟用户选中文本的行为：自动将连续空白（包括换行、制表符、多个空格）压缩为单个空格，并忽略纯空白文本节点；textContent 则原样输出 DOM 中的每个字符。

• 例如：<div>A<br>B</div> → innerText 是 "A B"（<br> 被当作空格），textContent 是 "A\nB"
• 再如：<span>    </span> → innerText 返回空字符串，textContent 返回 "    "

实际使用建议

需要获取“用户实际能看到的文本”（比如做无障碍检测、模拟复制粘贴、SEO 内容提取）→ 用 innerText；需要精确操作 DOM 文本结构（比如批量替换、正则匹配、服务端同构渲染一致性）→ 用 textContent。

• 注意兼容性：innerText 在旧版 IE 中行为略有差异（如忽略某些伪元素内容），现代项目可放心使用
• 性能上：innerText 需触发回流（layout），频繁读取可能影响性能；textContent 是纯 DOM 属性访问，更快更轻量
• 设置文本时：element.textContent = "xxx" 更安全（防 XSS），innerText 虽也转义，但语义上不推荐用于写入