用 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' )