使用Puppeteer获取HTML属性的值 [英] Get the Value of HTML Attributes Using Puppeteer
本文介绍了使用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屋!
查看全文