Puppeteer - 按 div 类搜索元素 - 返回 Element 的所有 div 类

Question

我有一个网站需要抓取，通过搜索特定的 div 类来查找 div 上的类列表。

例如，如果我们有以下代码：

//HTML on site
<div class="main">Main Stuff</div>
<div class="class1 class 2 specialclass">Other Stuff</div>
<div class="footer">Footer Stuff</div>'

我需要搜索“特殊类”作为 div 类，并返回该 div 的类列表，因此我想返回： class1 class2 specialclass

我以 Wikibooks 站点为例并运行以下代码：

//Puppeteer Code
const puppeteer = require('puppeteer')
const devices = require('puppeteer/DeviceDescriptors');

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://www.wikibooks.org/');

const myclassname = await page.evaluate(() => 
document.querySelector('.lang1').innerText);

console.log(myclassname);

它搜索类为 的 div，lang1屏幕顶部附近的默认语言 div，并返回对象的文本，但我不知道要更改为什么innerText才能获取对象的类名，因此它将返回central-featured-lang lang1该对象的所有类。

Answer 1

考虑您指定的网页中的以下元素：

<div class="central-featured-lang lang1" lang="en">...</div>

您可以使用className或getAttribute('class')获取class元素属性的内容：

const myclassname = await page.evaluate(() => document.querySelector('.lang1' ).className);

console.log(myclassname); // Returns "central-featured-lang lang1"

或者，您可以使用以下方法返回元素类的可迭代数组classList：

const myclassnamearray = await page.evaluate(() => [...document.querySelector('.lang1').classList]);

console.log(myclassnamearray[0]); // Returns "central-featured-lang"
console.log(myclassnamearray[1]); // Returns "lang1"