JS图片刮板

Question

我认为制作一个基本的图像刮板将是一个有趣的项目。下面的代码在网站上的控制台工作，但我不知道如何让它从我的app.js工作。

var anchors = document.getElementsByTagName('a');
var hrefs = [];
for(var i=0; i < anchors.length; i++){ 
var src = anchors[i].href;
if(src.endsWith(".jpeg")) {
hrefs.push(anchors[i].href);
}} console.log(hrefs);

我认为使用木偶师是一个好主意，但我的知识太有限，无法确定这是否正确。这是我的木偶代码:

const puppeteer = require("puppeteer");
async function scrape(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
var anchors = await page.evaluate(() => document.getElementsByTagName('a'));   

var hrefs = [];
for(var i=0; i < anchors.length; i++){ var img = anchors[i].href;
if(img.endsWith(".jpeg")) {
hrefs.push(anchors[i].href);
}} console.log({hrefs}, {img});

browser.close();
}

我明白代码的最后一部分是错误的，但我找不到一个可靠的答案来代替写什么。

谢谢你抽出时间来。

Answer 1

page.evaluate()只能传输可序列化的值(大致是JSON可以处理的值)。由于document.getElementsByTagName()返回不可序列化的DOM元素集合(它们包含方法和循环引用)，因此集合中的每个元素都被替换为空对象。您需要返回可序列化的值(例如，文本数组或href属性)或使用page.$$(selector)和ElementHandleAPI。

Web API没有在.evaluate()参数函数之外定义，所以您需要将所有Web API部分放在.evaluate()参数函数中，并从中返回可序列化的数据。

const puppeteer = require("puppeteer");
async function scrape(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const data = await page.evaluate(() => {
const anchors = document.getElementsByTagName('a');
const hrefs = [];
for (let i = 0; i < anchors.length; i++) {
const img = anchors[i].href;
if (img.endsWith(".jpeg")) {
hrefs.push(img);
}
}
return hrefs;
});
console.log(data);
await browser.close();
}