如何在 Puppeteer 中正确遍历子元素并获取文本内容-js教程-PHP中文网

本文详解 Puppeteer 中遍历 DOM 子元素时返回 undefined 的根本原因，并提供安全、高效、可维护的解决方案，包括使用 $$eval 一次性提取结构化文本数据及最佳实践建议。

本文详解 puppeteer 中遍历 dom 子元素时返回 `undefined` 的根本原因，并提供安全、高效、可维护的解决方案，包括使用 `$$eval` 一次性提取结构化文本数据及最佳实践建议。

在 Puppeteer 中尝试通过 evaluate() 返回 DOM 节点（如 x.children）再在 Node.js 环境中访问其属性（如 innerText），是导致 undefined 的最常见错误。这是因为浏览器上下文中的 DOM 元素是不可序列化的复杂对象——它们包含循环引用、方法、事件监听器等，无法通过 page.evaluate() 安全跨进程传递。一旦你调用 Object.values(x.children)，返回的是一个包含原生 DOM 元素的类数组对象；当 Puppeteer 尝试将其序列化回 Node.js 端时，所有 DOM 节点均被丢弃，仅保留 null 或 undefined。

✅ 正确做法：所有 DOM 读取操作必须在浏览器上下文中完成，并只返回可序列化的纯数据（如字符串、数字、数组）。

推荐使用 page.$$eval(selector, pageFn) —— 它直接在页面内执行函数，自动传入匹配的所有元素，并要求你返回 JSON-serializable 结果：

const selector = "#slenkanti_dalis tr"; // 更健壮：避免过度依赖层级（如 `> table > tbody`）
await page.waitForSelector(selector); // 关键！确保表格已渲染完成

const tableData = await page.$$eval(selector, rows =>
  rows.map(row => {
    // 提取每行所有 <td> 的纯文本内容（自动处理空白、换行）
    return Array.from(row.querySelectorAll("td"), cell =>
      cell.textContent.trim()
    );
  })
);

console.table(tableData);
// 输出示例：
// ┌─────────┬────────────┬───────────┐
// │ (index) │     0      │     1     │
// ├─────────┼────────────┼───────────┤
// │   0     │ '2024-03-15' │ '125.99 €' │
// │   1     │ '2024-02-28' │ '89.50 €'  │
// └─────────┴────────────┴───────────┘<p>? <strong>关键优化点说明：</strong>  </p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/1915" title="Summarizer"><img
														src="https://img.php.cn/upload/ai_manual/000/000/000/175680429286516.jpg" alt="Summarizer" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/1915" title="Summarizer" class="overflowclass">Summarizer</a>
													<p class="overflowclass">一款基于AI的在线文本摘要工具，可将较长的文章和文字内容提炼为更加简洁的核心信息，方便快速阅读和理解。</p>
												</div>
												<a rel="nofollow" href="/ai/1915" title="Summarizer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<ul><li>
<strong>避免 > 绝对路径选择器</strong>：#slenkanti_dalis > table > tbody > tr 过于脆弱，若 HTML 结构微调（如插入 <tbody>、添加 wrapper div）即失效。改用语义化、宽松的选择器 #slenkanti_dalis tr 更鲁棒。  <li>
<strong>强制等待元素就绪</strong>：动态加载的表格需 waitForSelector()，否则可能抓取空数组。  </li>
<li>
<strong>用 textContent 而非 innerText</strong>：textContent 是标准、性能更好、兼容性更广的属性；innerText 是 CSS 渲染相关且非标准（部分旧环境不支持）。  </li>
<li>
<strong>声明变量用 const</strong>：原始代码 for (atsiskaitymas1 of ...) 缺少声明符，会意外创建全局变量，应改为 for (const row of rows)。ESLint 可自动捕获此类问题。  </li>
<p>⚠️ 补充提醒：  </p>
<ul>
<li>不要混用 page.$$(...) + element.evaluate(...) 处理列表——这引入了冗余的 ElementHandle 生命周期管理，易出错且性能差；$$eval 是专为此类批量读取设计的更优 API。  </li>
<li>若需点击或触发事件，请用 element.click() 等受信任方法；但仅读取文本时，$$eval 是最简洁可靠的选择。</li>
</ul>
<p>掌握这一模式，不仅能解决 undefined 问题，更能写出更稳定、更易调试的 Puppeteer 数据抓取脚本。</p>
</tbody>
</li></ul>
</td>