nodejs

使用Puppeteer从一组DOM节点中获取某一属性值

使用Puppeteer，我选择了一些HTML元素：
await page.$$( 'span.styleNumber' );

我可以使用以下方法获取元素的文本：
console.log( await ( await styleNumber.getProperty( 'innerText' ) ).jsonValue() );

我怎样才能获得元素的data-Color属性的值？

这是我的脚本：

HTML

1
2
3
<span class="styleNumber" data-Color="Blue"\>SG1000</span\>
<span class="styleNumber" data-Color="Green"\>SG2000</span\>
<span class="styleNumber" data-Color="Red"\>SG3000</span\>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const puppeteer = require( 'puppeteer' );

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

    const page = await browser.newPage();

    await page.goto( 'http://www.example.com/sample.php' );

    // Get a list of all elements.
    var styleNumbers = await page.$$( 'span.styleNumber' );

    // Print the style numbers.
    for( let styleNumber of styleNumbers ) {
        try {
            console.log( await ( await styleNumber.getProperty( 'innerText' ) ).jsonValue() );
        }
        catch( e ) {
            console.log( `Could not get the style number:`, e.message );
        }
    }

    await browser.close();
} )();

上面的代码会打印出来：

1
2
3
SG1000
SG2000
SG3000

如何获取data-Color属性的值？有两种方法：

第一种方式

您可以使用evaluate方法获取属性值。

await page.evaluate('document.querySelector("span.styleNumber").getAttribute("data-Color")')

第二种方式

$$eval方法也可以使用。还有从变量调用Array的属性

const attr = await page.$$eval("span.styleNumber", el => el.map(x => x.getAttribute("data-Color")));

输出将是

["Blue", "Green", "Red"]

完整解决方案

1
2
3
4
5
const styleNumbers = await page.$$("span.styleNumber");

for( let styleNumber of styleNumbers ) {
    const attr = await page.evaluate(el => el.getAttribute("data-Color"), styleNumber);
}