textcontent 属性天然递归获取当前节点及其所有后代文本节点内容，自动拼接并保留原始空白符；它不解析标签、不触发重排，但会包含 script/style 注释等非可视内容，需手动预处理排除。
为什么 Node.textContent 本身就能递归获取所有后代文本
Node.textContent 的设计就是递归的——它会自动遍历当前节点及其所有后代节点（包括子、孙、曾孙等），提取所有文本节点的内容并拼接，跳过元素标签、注释、CDATA 等非文本内容。不需要手动写递归函数，也不需要遍历 childNodes。
常见误解是以为它只取直接子文本，其实不是：只要节点是 Element 或 Document，textContent 就天然递归。
- 对
<div>Hello<span>World</span>!</div>，div.textContent返回"HelloWorld!" - 中间的空格、换行、制表符会被保留（这是关键行为，不是 bug）
- 隐藏元素（
display: none或visibility: hidden）的文本仍会被包含
遇到换行/空白过多怎么办：用 innerText 还是正则清理
textContent 保留原始 HTML 中的空白符（如换行、缩进、多个空格），而 innerText 会按渲染效果返回“用户看到的文本”，但它是计算属性、触发重排、且不标准（IE 行为遗留），**不推荐用于纯文本提取场景**。
更可控的做法是用正则后处理：
const cleanText = el.textContent.replace(/\s+/g, ' ').trim();
-
/\s+/g把连续空白（含换行、tab、空格）全换成单个空格 -
.trim()去首尾空白 - 如果需保留段落换行，可用
.replace(/[\r\n]+/g, '\n').replace(/\s{2,}/g, ' ')
哪些节点类型会干扰 textContent 的结果
textContent 对所有 Node 类型都有效，但不同节点表现不同：
-
Element：递归取所有后代文本（最常用） -
Text节点：直接返回其nodeValue（即自身字符串） -
Comment节点：返回注释内容（如<!-- hello -->→" hello "） -
Script/Style元素：内容也会被包含（常被忽略，导致提取出 JS/CSS 源码）
若要排除 <script></script>、<style></style>、注释等，必须先移除或跳过这些节点——textContent 本身无法过滤。
想排除特定子树？得手动预处理 DOM
没有内置参数能跳过某些子元素。例如，要提取文章正文但排除广告 <aside class="ad"></aside>，必须先从 DOM 中移除或 clone 并剔除它们：
const clone = el.cloneNode(true);
clone.querySelectorAll('aside.ad, script, style, comment').forEach(n => n.remove());
const text = clone.textContent.replace(/\s+/g, ' ').trim();
-
cloneNode(true)深拷贝避免污染原 DOM -
querySelectorAll选中要排除的节点，.remove()删除 - 注意：
comment不是合法选择器，需用clone.childNodes遍历过滤Node.COMMENT_NODE
真正容易被忽略的是：脚本和样式块里的文本常被当成“内容”混入，而开发者往往只盯着 visible 元素看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
