最可靠方法是用 queryselector 定位元素后取 textcontent：它稳定、不受 css 影响、纯文本提取；避免 innertext（受样式干扰）和 innerhtml（含标签需二次处理），动态内容需等渲染完成，shadow dom 需访问 shadowroot，服务端用 cheerio 模拟。
用 querySelector 定位元素再取 textContent 最可靠
直接靠字符串截取或正则匹配 HTML 是高风险操作，容易因换行、空格、注释或嵌套结构崩掉。浏览器原生 DOM API 提供了稳定路径：先用 querySelector（或 querySelectorAll）按 CSS 选择器精确定位元素，再读它的 textContent 属性。
常见错误是误用 innerText——它受 CSS 样式影响（比如 display: none 的内容不返回），还可能触发重排；而 textContent 纯粹返回 DOM 树中的文本节点内容，更符合“提取原始文本”的本意。
- 如果目标有唯一
id，用document.querySelector('#my-id') - 如果靠类名，注意多类共存时写法：
document.querySelector('.header .title')（后代） vsdocument.querySelector('.header.title')（同时含两个类） - 若需提取多个同类型项，用
querySelectorAll配合Array.from(...).map(el => el.textContent)
处理动态加载或 Shadow DOM 要等时机
页面文本不是静态写死的？比如由 JavaScript 异步插入、或藏在 shadowRoot 里，那直接执行 querySelector 很可能返回 null。
关键判断点：是否已渲染完成。不要盲目加 setTimeout，优先检查是否有明确信号：
- 监听
DOMContentLoaded事件（适用于初始 HTML 加载完） - 若依赖框架（如 React/Vue），等其生命周期钩子（如
useEffect或mounted）后再查 - 遇到 Shadow DOM，需先访问
el.shadowRoot，再在其内部调用querySelector，例如：hostEl.shadowRoot.querySelector('.slot-text').textContent
innerHTML 和 textContent 别混用
想“只拿文字”，就别碰 innerHTML——它返回带标签的字符串，后续还得再过滤，徒增复杂度和出错概率。
但要注意边界情况：
-
textContent会合并相邻文本节点间的空白（包括换行缩进），结果是紧凑的一行。若需保留原始格式，得遍历childNodes手动拼接node.nodeValue - 若目标元素内含
<script></script>或<style></style>，它们的内容也会被包含在textContent中，必要时要额外排除 - 某些富文本编辑器生成的 HTML 会用
textContent返回的是解码后的 Unicode 字符，不是原始实体
Node.js 环境下用 cheerio 模拟 DOM 行为
服务端解析 HTML 字符串（比如爬虫、模板预处理），不能用浏览器 API。此时 cheerio 是最接近 querySelector 体验的方案，语法几乎一致，且轻量无浏览器依赖。
安装后基本流程就是：载入 HTML → 用 $(selector) 查找 → 调 .text()（对应 textContent）：
const cheerio = require('cheerio');
const $ = cheerio.load('<div class="name">Alice</div>');
console.log($('.name').text()); // 'Alice'
注意点：
-
cheerio默认不解析 XML 命名空间，若 HTML 含<svg></svg>等，需传{ xmlMode: true }选项 - 它不执行脚本、不加载外部资源，纯静态解析，这点比 Puppeteer 轻，但也意味着无法获取 JS 渲染后的内容
- 选择器支持程度略低于现代浏览器（比如不支持
:has()），复杂逻辑建议降级为遍历.find().each()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
