用 Puppteer 获取 HTML DOM 的元素节点后，如何获得节点的其他属性，也就是节点的Attribute？比如链接指向、样式、class 名称、id 名称、等等关键信息。本文探讨两种可行的方法。
元素节点属性
这里的属性，指元素节点的 Attribute，比如下面的例子
<a href="https://www.lfhacks.com">来源网站</a>
这个 <a> 元素有一个 href 属性，再比如
<div class="box" style="background: #F00">盒子</div>
这个 <div> 元素有 两个属性： class 和 style ，本文的目的是要获取上述属性的值，也就是如下表所示：
- https://www.lfhacks.com
- box
- background: #F00
有两种可选的方法：
$eval()
page.$eval()
使用 page.$eval(selector, pageFunction[, ...args]) 方法
获取属性
比如，要获取下面这个元素的 style 样式属性，
<div class="box" style="background: #F00">盒子</div>
可以这么写
let style = await page.$eval('.box',
function(el){
return el.getAttribute('style')
})
或者更简单的写法：
let style = await page.$eval('.box',
el=>el.getAttribute('style')
)
修改属性
要修改这个元素的 style 样式，需要用到 setAttribute(attr, value) 函数，用下面的代码：
await page.$eval('.box', function(el, value){
return el.setAttribute('style', value)
}, 'background: #0FF')
或者更简单的写法：
await page.$eval('.box',
(el, value)=> el.setAttribute('style', value),
'background: #0FF'
)
evaluate()
page.evaluate()
使用 page.evaluate(pageFunction[, ...args]) 方法
获取属性
仍然举上面的例子，可以这么获取 style 属性值
let divHandle = await page.$('.box')
let style = await page.evaluate(el => el.getAttribute('style'), divHandle)
修改属性
如要修改 style 属性值，则需要增加一个参数：
let divHandle = await page.$('.box')
await page.evaluate((el, value) => el.setAttribute('style', value),
divHandle,
'background: #0FF'
)
如果您对本站内容有疑问或者寻求合作，欢迎 联系邮箱 。邮箱已到剪贴板