Question

我已经成功获取了表的行：

var rows = await page.evaluate(() => Array.from(document.querySelectorAll('.summary > tbody > tr'), element => $(element)))

如何获取每一行的子级作为数组？

我要... Array.from(rows[i].querySelectorAll(...吗？

我尝试了几种不同的方法，但我无法弄清楚。

Answer 1

我理解您的问题，因此您只想获取表中存在的每一行的数组形式的单元格值。如果正确，那么您可以通过以下方式做到这一点：

  const rows = await page.evaluate(
    () => Array.from( document.querySelectorAll('table > tbody > tr') ) // Get the rows as an array
      .map(row => Array.from( row.querySelectorAll("td") ) // For each row get its cells as an array
      .map(td => td.textContent)) // Replace each cell in the latter array with its text
  )

Answer 2

我认为您可能正在按照这些思路做某事

const rows = await page.evaluate(
  () => Array.from(
    document.querySelectorAll('.summary > tbody > tr'),
    element => $(element)
  )
)

let children = []

for (const row of rows)
  children = [...children, ...row.children]

欢呼

?追逐

Answer 3

简短答案：

使用以下代码查询tr元素的直接子元素：

const rowChildren = await page.$$('.summary > tbody > tr > *');

长答案

您的代码没有执行您认为正在执行的操作。我查看了您的代码，向您显示问题。

问题

这又是您的代码：

var rows = await page.evaluate(
  () => Array.from(
    document.querySelectorAll('.summary > tbody > tr'),
    element => $(element),
  )
)

此代码的作用是：

在浏览器中运行document.querySelectorAll
将NodeList中的每个元素映射到jQuery对象（我假设$是jQuery）
在jQuery对象数组上调用JSON.stringify（以对其进行序列化）
puppeteer将序列化的数据从浏览器环境传输到Node.js环境
rows现在包含一个“ jQuery对象”数组，而没有引用它们的实际DOM节点

因此，此代码无法为您提供Node.js环境中jQuery元素的句柄，因为函数page.evaluate仅可以返回可序列化的对象（而DOM节点则不能）。尽管看起来您已经成功查询了DOM节点，但是这些对象只是DOM节点周围的“ jQuery包装器”，而没有实际的DOM节点，因为这些对象尚未序列化。

解决方案

要从浏览器环境中查询DOM节点，必须使用类似page.$$的函数，该函数可以返回ElementHandles。因此，使用以下代码，将返回实际的tr行：

const rows = await page.$$('.summary > tbody > tr');

要进一步查询其子元素，只需在末尾添加一个> *选择器，该选择器将查询tr行的所有直接子节点：

const rowChildren = await page.$$('.summary > tbody > tr > *');

获取行的单元格

3 个答案:

简短答案：

长答案