最稳妥方式是用 document.querySelectorAll 选中元素后，通过 Array.from 转数组并映射 textContent.trim() 提取纯文本；textContent 比 innerText 更稳定，适用于多数场景。
用 document.querySelectorAll 选中元素再提取文本内容
直接用 document.querySelectorAll 获取节点列表，再用 Array.from() 转成数组并映射出 textContent，是最常用也最稳妥的方式。它不依赖元素是否可见、是否含 HTML 标签，只取纯文本内容。
常见错误是误用 innerHTML——它会把标签当字符串带进来，或者遇到空元素时返回空字符串而非 null，导致数组里混入意外值。
-
document.querySelectorAll('p')返回的是NodeList，不是数组，不能直接调用map - 必须用
Array.from(nodeList, el => el.textContent.trim())或展开语法[...nodeList].map(...) - 加
trim()很关键：避免换行、缩进、前后空格污染数据
处理 innerText 和 textContent 的差异
textContent 读取所有文本节点（包括 display: none 元素），innerText 只读取渲染后可见的文本，且会触发重排（性能略差）。多数场景该用 textContent——除非你明确需要跳过隐藏内容。
例如：<div style="display:none">secret</div>
<div>visible</div>，textContent 会拿到 "secretvisible"，而 innerText 只有 "visible"。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若页面有动态显示/隐藏逻辑，且你只想要用户实际看到的文本，才考虑
innerText -
innerText在某些旧版 Safari 中对换行处理不一致，textContent更稳定 - 两者都自动合并连续空白符（多个空格/换行 → 单个空格），但
textContent不受 CSS 影响
从非标准结构（如无 class/id 的嵌套 span）中提取
当目标文本分散在没有统一选择器的子元素里（比如一堆无 class 的 <span></span> 或 <a></a>），别硬写多层 querySelector，优先用树遍历方式。
一个轻量解法：选中父容器，用 childNodes 过滤出文本节点，再拼接或分组：
const container = document.querySelector('#list');
const texts = Array.from(container.childNodes)
.filter(node => node.nodeType === Node.TEXT_NODE)
.map(node => node.textContent.trim())
.filter(text => text.length > 0);
-
childNodes包含文本节点和元素节点，nodeType === Node.TEXT_NODE是筛选关键 - 注意：换行缩进在 HTML 源码中也会生成 TEXT_NODE，所以
filter(text => text.length > 0)不能省 - 如果要保留结构顺序（比如每行一个数组项），得结合
children遍历 + 子元素内textContent提取
避免 DOM 未就绪导致空数组
脚本执行早于 DOM 加载完成时，querySelectorAll 返回空 NodeList，结果数组长度为 0——这不是代码错，是时机问题。
- 确保脚本放在
</body>前，或监听DOMContentLoaded事件 - 服务端渲染（SSR）或框架（React/Vue）环境下，DOM 可能被接管，直接操作可能失效；此时应走框架提供的 ref 或生命周期钩子
- 做自动化测试时，若用 Puppeteer 等工具，需显式等待元素出现：
await page.waitForSelector('p')
childNodes 的一部分，而 textContent 从父元素取值时又会把它们全吞进去。要不要清理、怎么切分，得看你的下游用途——是喂给搜索框、还是存数据库、还是做语义分析，处理策略完全不同。 
