Puppeteer 从 <dl> 结构中获取元素答案

【问题标题】：Puppeteer get elements from a <dl> structurePuppeteer 从 <dl> 结构中获取元素
【发布时间】：2020-01-25 21:16:55
【问题描述】：

我正在尝试获取如下结构中的元素：

<dl class="foo-bar">
    <dt>Key</dt>
    <dd>Value<dd>
    <dt>Key</dt>
    <dd>Value<dd>
    ....
</dl>

这就是我想在纯 JS 中做的事情：

let list = document.querySelectorAll('.foo-bar')

let key = list[0].children[0].innerText // would give me "Key"

这就是我所在的地方：

let list = await page.evaluate(() => Array.from(document.querySelectorAll('.foo-bar'), element => element))

let key = list[0] //returns empty object ({})

编辑：我需要访问所有 dt 键/值。最好将它们添加到这样的对象中：

let object = {
    key1: "key1",
    value1: "value1",
    key2: "key2",
    value2: "value2"
}

我知道对象的结构没有多大意义，但它并不真正相关。

【问题讨论】：

标签： javascript node.js puppeteer dom-manipulation

【解决方案1】：

如果你只需要第一个dt文本，你应该直接请求它：

await page.evaluate(() => document.querySelector('.foo-bar dt').innerText)

【讨论】：

我看到我最初的问题有点不清楚，但现在已经更新了。我需要访问所有 dt 元素

【解决方案2】：

.foo-bar dt, .foo-bar dd 选择器应该为您提供嵌套在<dl class="foo-bar"></dl> 中的所有<dt> 和<dd> 元素的数组。

const list = await page.evaluate(() => document.querySelectorAll('.foo-bar dt, .foo-bar dd'));

const key = list[0].innerText;

或者，您可以使用$$() page method，它本质上是document.querySelectorAll()。这是一个例子：

const list = await page.$$('.foo-bar dt, .foo-bar dd');

const key = list[0].innerText;

这是一个示例，说明如何在数组上使用 reduce() 将其转换为所需的对象：

// Stubbing the list data for example.
const list = [
  { innerText: 'key1' },
  { innerText: 'value1' },
  { innerText: 'key2' },
  { innerText: 'value2' },
  { innerText: 'key3' },
  { innerText: 'value3' }
]

const test = list.reduce((acc, v, i) => {
  // Map even items as properties and odd items as values to prev property.
  i % 2 === 0 ? acc[v.innerText] = null : acc[list[i-1].innerText] = v.innerText;
  return acc;
}, {});

console.log(test);

【讨论】：

【解决方案3】：

调整@Vaviloffs 答案解决了这个问题！

我只是用

创建了一个包含所有 dt 和 dd 元素的数组

let list = await page.evaluate(() => Array.from(document.querySelectorAll('.foo-bar dt, .foo-bar dd'), element => element.textContent))

【讨论】：