Puppeteer 获取和修改 元素节点的属性

先打个广告：欢迎关注我的公众号，参与 文史大挑战 趣味题目。使用方法见 这篇文章 。

正文开始：

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

如果您对本文有疑问或者寻求合作，欢迎 联系邮箱 。邮箱已到剪贴板

精彩评论