puppteer page.$$eval 和 puppteer page.$eval
在 Puppeteer 中，page.$$eval 和 page.$eval 都是用于在页面中执行 JavaScript 代码的方法，但它们在作用范围和使用方式上有明显区别。以下是它们的详细对比和用法说明：
1. page.$eval(selector, pageFunction[, ...args])
作用
-
选择 第一个 匹配
selector的元素，并将该元素传递给pageFunction进行处理。 -
适用于对 单个元素 进行操作或提取数据。
// 获取第一个 <h1> 的文本
const title = await page.$eval('h1', el => el.textContent);// 获取第一个链接的 href
const firstLink = await page.$eval('a', a => a.href);// 修改第一个输入框的值
await page.$eval('input', input => {
input.value = 'New Value';
});
特点
-
如果找不到匹配的元素，会抛出错误。
-
pageFunction的参数element是单个 DOM 元素。
2. page.$$eval(selector, pageFunction[, ...args])
作用
-
选择 所有 匹配
selector的元素，并将这些元素的数组传递给pageFunction进行处理。 -
适用于对 多个元素 进行批量操作或提取数据。
// 获取所有链接的文本
const allLinksText = await page.$$eval('a', links => {
return links.map(a => a.textContent);
});// 获取所有图片的 src 属性
const imageSources = await page.$$eval('img', imgs => {
return imgs.map(img => img.src);
});// 批量修改所有按钮的样式
await page.$$eval('button', buttons => {
buttons.forEach(btn => {
btn.style.backgroundColor = 'red';
});
});
特点
-
如果找不到匹配的元素，返回空数组
[]。 -
pageFunction的参数elements是一个 DOM 元素数组。
核心区别对比
| 特性 | page.$eval | page.$$eval |
|---|---|---|
| 选择范围 | 第一个匹配的元素 | 所有匹配的元素 |
| 返回值 | pageFunction 的单个返回值 | pageFunction 的数组或批量操作结果 |
| 未找到元素时 | 抛出错误 | 返回空数组 [] |
| 适用场景 | 操作或提取单个元素的数据 | 批量操作或提取多个元素的数据 |