时间戳

首页 > 解决方案 > 试图弄清楚如何使用 Puppeteer 根据类名提取 DOM 元素的集合

javascript - 试图弄清楚如何使用 Puppeteer 根据类名提取 DOM 元素的集合

问题描述

我正在抓取的网页有几个 DIV 元素，它们的 CSS 类名称为“ s-suggestion ”。

我希望从这些元素中获取数据集值。

我的脚本中有以下代码行（在 node.js 上运行）：

const suggestions = await page.$$eval('.s-suggestion',(divs) => divs);

当我查看它的值时，suggestions.length它是 10。

现在下面的代码：

        for (let n=0;n<suggestions.length;n++) {
            const suggestion = suggestions[n];
            console.log("n="+n)
            
            // line below outputs value of:   undefined 
            console.log("   - suggestion className: "+suggestion.className);

            // line commented out below is approx. what I'd like to have:
            // const sKeyword = suggestion.dataset.keyword
        } // next n

为 className 返回的值都是undefined。

我不认为这些对象是 DOM 节点！

顺便说一句：这些 DIV 具有相同的类名，但没有我事先知道的唯一 ID。

标签： javascriptpuppeteer

解决方案

不幸的是，page.evaluate()类似的只能传输可序列化的值（粗略地说，JSON 可以处理的值）。由于await page.$$eval('.s-suggestion',(divs) => divs);返回不可序列化的 DOM 元素集合（它们包含方法和循环引用），集合中的每个元素都被替换为空对象或undefined. page.$$(selector)您需要返回可序列化的值（例如，文本或属性数组）或使用类似ElementHandleAPI。

对于您的情况，请尝试：

const keywords = await page.$$eval(
  '.s-suggestion',
  divs => Array.from(divs, div => div.dataset.keyword),
);

推荐阅读