innertext忽略隐藏元素且受渲染影响，textcontent纯读取dom结构、稳定高效；需“所见即所得”时选innertext，否则优先用textcontent。
innerText 会忽略隐藏元素，但 textContent 不会
如果你用 innerText 获取一个包含 display: none 子元素的容器内容，那个子元素的文本根本不会出现。而 textContent 会照单全收——它只看 DOM 树结构，不关心样式是否隐藏。
常见错误现象：页面上明明有数据，innerText 却返回空字符串或比预期少很多内容。这时候先检查目标元素或其子节点是否被 CSS 隐藏（visibility: hidden 也会被忽略，但 opacity: 0 不影响）。
-
innerText依赖渲染结果，受 CSS、字体加载、换行折叠等影响 -
textContent是纯 DOM 层面的读取，稳定、快、跨浏览器一致 - IE 早期只支持
innerText，现代项目应优先用textContent，仅在需模拟用户“所见即所得”文本时才选innerText
innerText 会自动合并空白、丢弃换行和标签，但 innerHTML 不会
innerText 的核心行为是“格式化后返回可视文本”：连续空格变一个空格，块级元素间自动加换行，
<br>被当作换行处理，所有 HTML 标签直接剥离。而
innerHTML 返回原始 HTML 字符串，保留所有标签、属性、实体编码（如 ）、甚至非法标签片段。
<p>使用场景举例：做表单校验时提取用户“看到的输入内容”，用 <code>innerText 更贴近真实感知；但做服务端渲染预处理或富文本解析，必须用 innerHTML 或 textContent 配合正则清洗。
- 设置
innerText = '<strong>hello</strong>'，页面显示的是字面量<strong>hello</strong>，不是加粗的 hello - 设置
innerHTML = '<strong>hello</strong>'，页面渲染出加粗的 hello -
innerText对 `` 或 `<code>` 内容会破坏原有缩进和换行，<code>textContent</code> 保留原样</code>
innerText 在 Firefox 中不可靠，应降级到 textContent
Firefox 从一开始就没实现 innerText，而是用 textContent 替代。虽然现在多数版本已支持，但行为仍有差异：比如 Firefox 的 innerText 不响应 line-height 或 white-space 变化，也不计算伪元素（::before/::after）内容。
容易踩的坑：本地开发用 Chrome 测试正常，上线后 Firefox 用户发现文本截断、长度计算错误、或复制粘贴内容缺失。
- 不要写
el.innerText || el.textContent这种兜底——两者语义不同，不能互换 - 统一用
textContent，除非你明确需要“按当前 CSS 渲染状态提取文本”（例如自动化截图对比、可访问性测试） - 若必须用
innerText，加 feature detect：'innerText' in document.body ? 'innerText' : 'textContent'，但注意 fallback 后逻辑是否仍成立
innerText 性能比 textContent 差，且触发重排
innerText 必须计算布局：它要判断哪些文字实际可见、是否被裁剪、是否换行、是否被其他元素遮挡。这意味着每次读取都可能强制浏览器同步回流（reflow），尤其在深层嵌套或复杂样式下开销明显。
textContent 是纯内存操作，只遍历 DOM 树文本节点，无样式依赖，零重排。
- 循环中频繁读取
innerText（如实时字数统计）会导致卡顿，改用textContent+input事件节流 - 服务端渲染（SSR）或静态生成时，
innerText根本不可用（无 layout 环境），必须用textContent - 自动化测试里用
innerText断言文本内容，可能因动画未完成、字体未加载而失败；textContent更稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
