试图从 Puppeteer 中的 elementHandle 获取 *all 类*

Question

目前我正在使用

const element = await page.$('div.layout-board-section')

获取div的elementHandle。但是，然后我需要从该 elementHandle 中获取 classes 的列表。我尝试了几种不同的解决方案，尽管它们似乎都只 return 第一个 class 在评估函数中使用 element.className。

有什么方法可以获取一个元素的所有 classes 吗？

Answer 1

您可以使用节点的 .classList 属性.

const classes = await page.$eval(
  'div.layout-board-section', 
  el => [...el.classList]
);

或者如果您已经有一个 elementHandle：

const classes = await someElement.evaluate(el => [...el.classList]);

完整示例：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  const html = `<div class="foo bar baz quux">blahhh</div>`;
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);

  const classes = await page.$eval("div", el => [...el.classList]);
  console.log(classes); // => [ 'foo', 'bar', 'baz', 'quux' ]

  // or with an elementHandle:
  const divEl = await page.$("div");
  console.log(await divEl.evaluate(el => [...el.classList]));
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;