用 queryselector 定位卡片区域再提取文本最直接：先用 document.queryselector 精准选中如 .card 容器，再用 textcontent 获取全部文本，注意空值校验、动态渲染时机及隐藏内容处理。
用 querySelector 定位卡片区域再提取文本最直接
HTML 中没有“卡片”语义标签，所谓卡片通常是 <div class="card">、<code><article></article> 或带 role="region" 的容器。想提取其中的文本，核心是先精准选中这个区域，再读取其文本内容。用 document.querySelector 配合合适的 CSS 选择器是最常用也最可控的方式。
常见错误是直接用 document.querySelectorAll(".card") 却没检查返回 NodeList 是否为空，导致后续调用 .textContent 报 Cannot read property 'textContent' of undefined。
- 优先用类名 + 层级限定，比如
document.querySelector(".product-card .title")比.card > *更安全 - 若卡片由框架（如 React）动态渲染，需确认执行时机——不能在 DOM 加载完成前运行
-
textContent会包含所有子文本（含空格换行），如需干净纯文本，得额外用.replace(/\s+/g, " ").trim()
遇到嵌套结构或富文本时，innerText 和 textContent 行为不同
textContent 返回所有文本节点内容（包括 display: none 或 visibility: hidden 元素里的文字），而 innerText 只返回浏览器实际渲染出的可见文本，且会按换行/缩进做一定格式化。对卡片这类 UI 组件，多数场景应选 textContent，因为它更稳定、不依赖样式计算。
例如卡片里有折叠详情区：<div class="card">
<p>标题</p>
<div style="display:none">隐藏描述</div>
</div>，textContent 会包含“隐藏描述”，innerText 不会。
- 需要模拟用户“看到的文本”？用
innerText，但注意它在某些旧版 Safari 中可能返回空字符串 - 需要完整结构化文本（如用于搜索索引或数据清洗）？必须用
textContent - 两者都可能把按钮文字、图标替代文本（
aria-label）一并抓取，如不需要，得手动过滤button、svg等节点
用 Array.from 批量提取多个卡片文本时别漏掉空值校验
一页常有多个卡片（如商品列表），用 document.querySelectorAll(".card") 得到 NodeList 后，需转成数组再遍历。直接写 cards.forEach(...) 在部分老环境（IE）会报错，必须用 Array.from(cards) 或 [...cards]。
更隐蔽的问题是：某些卡片可能因数据缺失没渲染关键子元素，比如 .card-title 不存在，此时 card.querySelector(".card-title")?.textContent 会返回 undefined，直接拼接会导致 "undefined" 字符串混入结果。
- 推荐写法：
const title = card.querySelector(".card-title")?.textContent?.trim() || "" - 避免用
innerHTML提取文本——它会把 HTML 标签当字符串返回，容易引入 XSS 风险或格式噪音 - 如果卡片内含
<script></script>或<style></style>标签（极少见但可能），textContent仍会包含其内容，需正则清理：.replace(/<script>/gi, "")</script>
服务端渲染或 SSR 场景下，DOM API 不可用，得换思路
在 Node.js 环境（如 Next.js getStaticProps、Nuxt asyncData）中，document 对象不存在，无法用 querySelector。此时必须借助 HTML 解析库，比如 cheerio（轻量，API 类似 jQuery）或 jsdom（完整模拟浏览器 DOM，但更重）。
用 cheerio 示例：
const $ = cheerio.load(htmlString);<br>const cards = $(".card");<br>const texts = cards.map((i, el) => $(el).text().trim()).get();
-
cheerio不执行脚本、不加载 CSS，速度更快，适合纯文本提取 -
jsdom能处理document.querySelectorAll原生语法，迁移成本低，但内存占用高，不适合高频调用 - 若原始 HTML 是 XML-like（如 XHTML），注意
cheerio默认按 HTML5 解析，可能误判自闭合标签，需传{ xmlMode: true }
