javascript - Puppeteer - 按 div 类搜索元素 - 返回元素的所有 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 特殊类

我使用维基教科书网站作为示例并运行以下代码:

//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);

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

Answer 1

考虑 webpage you specified 中的以下元素:

<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"