使用Puppeteer获取HTML属性的值 [英] Get the Value of HTML Attributes Using Puppeteer

查看:316
本文介绍了使用Puppeteer获取HTML属性的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Puppeteer选择了以下HTML元素:

Using Puppeteer, I've selected some HTML elements using:

await page.$$( 'span.styleNumber' );

我可以使用以下方法获取元素的文本:

I can get the element's text using:

console.log( await ( await styleNumber.getProperty( 'innerText' ) ).jsonValue() );

如何获取元素的data-Color属性的值?

How can I the value of the element's data-Color attribute?

这是我的剧本:

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

木偶

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();
} )();

上面的代码将打印:

SG1000
SG2000
SG3000

如何获取data-Color属性的值?例如:

How can I get the value of the data-Color attributes? E.g.:

console.log( await ( await styleNumber.getAttribute( 'data-Color' ) ) ); // Blue

推荐答案

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

You can get attribute value with evaluate method.

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


第二种方式

也可以使用

$$ eval 方法.也称为变量中的数组的属性


Second way

$$eval method can also be used. Also attributes called as Array from variable

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

输出将为

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


您的解决方案

const styleNumbers = await page.$$("span.styleNumber");

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

这篇关于使用Puppeteer获取HTML属性的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆