textcontent可获取含隐藏元素的纯文本且性能高，但赋值会清空子树；innertext在firefox中跳过隐藏节点；html字符串转纯文本应优先用domparser解析后取textcontent。
textContent读取元素纯文本时，隐藏内容也会被拿到
直接访问 textContent 属性就能拿到元素及其所有后代的原始文本内容，包括 display: none 或 visibility: hidden 元素里的文字。这点和 innerText 不同——后者在 Firefox 中会跳过隐藏节点，导致文本不全。
常见错误现象：用 innerText 提取后台管理页中折叠面板里的文案，结果收起状态下返回空字符串；换成 textContent 就能稳定获取。
- 它保留原始换行符和空格（
<div>\n a\n b\n</div>的textContent是"\n a\n b\n"） - 不执行脚本、不触发重排，性能开销极低
- 若目标元素不存在，
document.getElementById("xxx").textContent会报错Cannot read property 'textContent' of null，务必先判空
设置textContent会清空整个子树
给 textContent 赋值不是“追加”或“替换部分”，而是彻底移除当前节点下所有子节点，只留下一个纯文本节点。这意味着：
- 原有事件监听器全部丢失（哪怕只是改一个字）
- 内联样式、自定义属性、data-* 字段一并消失
- 不会解析 HTML 实体，
" "，不是空格
示例：el.textContent = "<strong>hello</strong>" 显示的就是字面量 "<strong>hello</strong>"，不是加粗的 hello。
从HTML字符串转纯文本，优先用DOMParser + textContent
如果你手头是一段 HTML 字符串（比如富文本编辑器输出、API 返回的 HTML 片段），想安全转成纯文本，别用正则删标签——容易漏掉 <script></script> 或误杀实体。正确姿势是用 DOMParser 解析后再取 textContent：
function htmlToText(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
return doc.body?.textContent || '';
}
这个方法能处理 <p>© 2026</p> 这类含实体的内容，但注意：它仍不解析实体，© 还是原样输出。如需转义，得额外走一遍 DOMParser 解析再序列化，或用 textarea 中转法。
textContent vs innerHTML：选错会出XSS或样式崩塌
要不要解析 HTML，是核心分界线：
- 用户输入、日志展示、表单校验提示 → 一律用
textContent，防 XSS、保性能、不丢隐藏文案 - 需要渲染按钮、列表、带样式的卡片 → 必须用
innerHTML，但必须对来源做清洗（如 DOMPurify） - 想保留换行缩进又不要标签？
textContent配合 CSSwhite-space: pre-wrap更稳，不用折腾innerHTML插<br>
最易被忽略的一点：修改后如果要保留原有子节点结构（比如只更新某段文字），textContent 不适用，得用 Node.replaceChild() 或 insertAdjacentText()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
