Javascript getElementsByClassName 返回一个奇怪的集合

Question

我有一个网页爬虫，我正在使用 puppeteer 来爬行。我尝试使用 getElementsByClassName 获取 DOM 中的所有元素，但它返回了一个不稳定的集合。我期望收到一组 html 元素及其子元素。

 (async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    const opportunities = [];

    let url = "https://recruiting2.ultipro.com/PUB1004PSCU/JobBoard/d433f5c3-37c8-4bcf-a3af-248a707c7d31/?q=&o=postedDateDesc"
    await page.goto(url, {timeout: 0, waitUntil: 'networkidle0'});

    const oportunitiesDOM = await page.evaluate(() => {
        return Array.from(document.getElementsByClassName("opportunity"));
    });

    console.log(oportunitiesDOM);
    oportunitiesDOM.forEach(opo => {
        console.log(opo);
        // crawlOpo(opo)
    });

    browser.close();

  } catch (err) {
    console.error(err)
  }
})()

输出的数据是:

{ __ko__1568043867697: 'ko169' }
{ __ko__1568043867697: 'ko187' }
{ __ko__1568043867697: 'ko205' }
{ __ko__1568043867697: 'ko223' }
{ __ko__1568043867697: 'ko241' }
{ __ko__1568043867697: 'ko259' }
{ __ko__1568043867697: 'ko277' }
{ __ko__1568043867697: 'ko295' }
{ __ko__1568043867697: 'ko313' }
{ __ko__1568043867697: 'ko331' }
{ __ko__1568043867697: 'ko349' }
{ __ko__1568043867697: 'ko367' }
{ __ko__1568043867697: 'ko385' }
{ __ko__1568043867697: 'ko403' }
{ __ko__1568043867697: 'ko421' }
{ __ko__1568043867697: 'ko439' }
{ __ko__1568043867697: 'ko457' }
{ __ko__1568043867697: 'ko475' }
{ __ko__1568043867697: 'ko493' }
{ __ko__1568043867697: 'ko511' }
{ __ko__1568043867697: 'ko529' }
{ __ko__1568043867697: 'ko547' }
{ __ko__1568043867697: 'ko565' }
{ __ko__1568043867697: 'ko583' }
{ __ko__1568043867697: 'ko601' }
{ __ko__1568043867697: 'ko619' }
{ __ko__1568043867697: 'ko637' }
{ __ko__1568043867697: 'ko655' }
{ __ko__1568043867697: 'ko673' }
{ __ko__1568043867697: 'ko691' }

我似乎无法弄清楚这是为什么以及如何纠正这个问题。我确实知道我正在抓取的网站正在使用 React，但我不确定这是否与之有关。

Answer 1

问题

page.evaluate只能与可序列化的数据一起使用。这是可以通过 JSON.stringify 从浏览器环境传递到 Node.js 环境的数据(如字符串、数字等)。通过这种方式无法将 DOM Node 转移到 Node.js 环境。

解决方案

如果要查询elements元素，需要使用page.$$反而。引用文档:

The method runs document.querySelectorAll within the page. If no elements match the selector, the return value resolves to [].

代码示例

执行以下代码后，oportunitiesDOM 是一个数组，其中包含类 opportunity 引用的 DOM Node :

const oportunitiesDOM = await page.$$('.opportunity');