textcontent可直接获取父元素及其所有子元素的纯文本内容，自动压缩空白符并trim首尾，但包含注释、script和style中的文本；需精确提取直接子文本节点时应遍历childnodes筛选nodetype为3的节点。
用 textContent 直接获取父元素内所有文本内容
如果目标只是拿到父元素及其所有子元素里的纯文本（忽略标签、换行、空格等格式），textContent 是最直接的选择。它会递归抓取所有后代节点的文本，拼成一个字符串。
常见错误是误用 innerText —— 它受 CSS 样式影响（比如 display: none 的元素内容不会被包含），还可能触发重排，在性能敏感场景要避开。
-
textContent返回所有文本，包括注释、script和style标签里的内容（如需过滤得手动处理） - 若父元素里有大量嵌套、动态插入的 DOM，
textContent仍能稳定工作，无需额外遍历 - 注意：它会把多个空白符（空格、换行、制表符）压缩成单个空格，且开头结尾自动 trim
用 childNodes + nodeType 精确提取直接子文本节点
当只需要父元素「直接子级」中的文本（排除孙子及更深层的文本），就不能依赖 textContent，得手动遍历 childNodes 并筛选文本节点。
关键点在于区分节点类型：nodeType === 3 表示文本节点，nodeType === 1 是元素节点，nodeType === 8 是注释节点。很多开发者漏判注释节点，导致意外提取出注释内容。
- 用
Array.from(parent.childNodes).filter(node => node.nodeType === 3).map(node => node.textContent)可得所有直接子文本节点的内容数组 - 注意：空格和换行在 HTML 中也会生成文本节点，所以即使写成
<div>A<span>B</span>C</div>，childNodes也可能包含空白文本节点 - 如果 HTML 是紧凑格式（无换行缩进），或者已用
parent.innerHTML = parent.innerHTML.replace(/>\s+, '> 预处理过，能减少干扰文本节点
用 querySelectorAll('*') 排除特定子元素后再提取文本
有时需求是“提取父元素下除某些标签外的所有文本”，比如去掉所有 <script></script>、<style></style>、<button></button> 里的内容。这时候先移除或临时隐藏这些子元素更可靠。
直接删 DOM 会影响原结构，推荐克隆后操作：
- 用
const clone = parent.cloneNode(true)拷贝整棵树 - 再用
clone.querySelectorAll('script, style, [aria-hidden="true"]')批量移除无关节点 - 最后对
clone调用textContent，结果就只含“干净”的可见文本 - 注意：
cloneNode(true)不复制事件监听器，但会复制内联样式和属性，一般够用
正则清理 innerHTML 不是好主意
有人试图用 parent.innerHTML.replace(/]*>/g, '') 去掉标签来提取文本，这在多数情况下会失败。
原因很实在：HTML 不是正则友好的格式。自闭合标签（<br>）、属性含 >（如 title="a > b"）、CDATA 区域、注释（<!-- -->）都会让正则错乱甚至抛错。
- 哪怕简单如
<div title="x>y">hello</div>，正则就可能提前截断 - 浏览器解析 HTML 是状态机，正则是线性匹配，二者模型不兼容
- 真要走字符串路径，至少用 DOMParser 解析后再取
textContent，而不是硬刚正则
实际中最容易被忽略的是文本节点的“隐形存在”：DOM 树里那些看不见的换行和缩进，会成为 childNodes 中的真实节点。不预判它们，nodeValue 或 textContent 就可能返回一堆空格或换行符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
