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> 元素有 两个属性: classstyle ,本文的目的是要获取上述属性的值,也就是如下表所示:

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

本页面内容采用 署名协议 CC-BY 授权。欢迎转载,请保留原文链接


分类

相关文章