textContent 能自动提取节点及所有后代的文本内容并过滤标签，无需递归遍历；它保留空白符、不执行脚本、可获取隐藏元素文本，但不解析 HTML 实体，赋值会清空子树而非过滤。
textContent 本身就能过滤所有标签，不需要额外递归或遍历
textContent 是浏览器原生行为，只要目标节点是 Element 或 Document，它就自动提取该节点及其所有后代中**所有文本节点的内容**，跳过 script、style、注释、CDATA 和所有标签。你不需要手动写 for 循环、也不用判断 nodeType。
常见错误是以为它只取直接子文本——比如对 <div><p>hello</p></div> 调用 div.textContent，结果发现有值，就误以为“得先找 p”，其实完全没必要。
- 它保留原始空白符（换行、缩进、多个空格）
- 它不执行脚本、不触发重排、不解析 HTML 实体（
- 它能拿到
display: none或visibility: hidden元素里的文字，这点比innerText稳定得多 - 如果目标元素不存在，
document.getElementById('xxx').textContent会报Cannot read property 'textContent' of null，务必先判空
从 HTML 字符串转纯文本：必须用 DOMParser + textContent
如果你手头是一段 HTML 字符串（比如 API 返回的富文本、邮件正文），不能直接对字符串调用 textContent——它只作用于 DOM 节点。
正确做法是先用 DOMParser 解析成文档对象，再取 body.textContent：
立即学习“前端免费学习笔记（深入）”；
function htmlToText(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
return doc.body?.textContent || '';
}
这个方法能安全处理嵌套、自闭合、<script>、<style> 等内容，比正则可靠一个数量级。
- 不用临时
div.innerHTML = html，避免意外执行内联脚本或污染当前 DOM -
doc.body可能为null（比如传入空字符串或纯文本），所以要用可选链?.textContent - 它仍不解析 HTML 实体；如需把
©变成 ©，得额外走一次textarea中转或二次 DOMParser
赋值时用 textContent 会清空整个子树，不是“过滤”而是“重置”
很多人想“把某个 div 里的 HTML 标签去掉，只留文字”，然后写 el.textContent = el.innerHTML——这确实能显示纯文本，但副作用极强：
- 所有子元素被彻底移除，包括事件监听器、
data-属性、表单状态、Canvas 上下文等 - 内联样式、
class、id全部丢失 - 如果原结构里有
<input value="xxx">，赋值后它的当前值不会保留在textContent里（因为value是属性，不是文本节点） - 这不是“过滤”，是“销毁重建”；真要保留结构只改内容，得用更细粒度操作（比如遍历文本节点替换）
需要转义 HTML 实体？textContent 不管这事，得另加一层
textContent 对 、、<code>© 这类实体完全不做处理，原样输出字符串。如果你的原始 HTML 字符串里含大量实体，而你期望得到的是渲染后的语义文本（比如把 当作空格、 当作 <code>），就不能只靠 <code>textContent。
安全且兼容的做法是借道 textarea：
function decodeHtmlEntities(str) {
const textarea = document.createElement('textarea');
textarea.innerHTML = str;
return textarea.value;
}
// 再组合：decodeHtmlEntities(htmlToText(html))
注意：这个组合调用顺序不能反，必须先 htmlToText 再 decodeHtmlEntities，否则 textarea.innerHTML 会把原始 HTML 标签当语法解析，导致意料外的结构。
真正容易被忽略的点是：**textContent 的“纯文本”是 DOM 层面的纯，不是语义层面的纯**。它忠于 DOM 树结构，但不管 HTML 实体含义、CSS 渲染效果、用户是否真的能看到——这些都得靠你根据场景补足。
