当前位置: 代码迷 >> 综合 >> Node+puppeteer学习笔记(八)-- 使用 ” evaluate “函数执行自定义js脚本
  详细解决方案

Node+puppeteer学习笔记(八)-- 使用 ” evaluate “函数执行自定义js脚本

热度:24   发布时间:2023-12-13 08:38:02.0

官方英文版API入口:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
汉化版API入口:https://yq.aliyun.com/articles/607102.
学习笔记入口:https://blog.csdn.net/qupan1993/article/details/85371556.

我们可以使用page.evaluaate()函数来执行自定义的一些js脚本,在写爬虫的时候我们需要得到一些网址、文本、图片、视频等信息,我们需要去解析网页Dom得到信息并返回,这些都在函数中进行,先看一下官方给的解释和小demo

在这里插入图片描述

1、好啦上个例子看看喽、抓取百度首页右上角的标题和对应的URL网址。这个大概就是很简单的爬虫入门了吧

const puppeteer = require('puppeteer');(async () => {
    const browser = await puppeteer.launch({
    headless:false});const page = await browser.newPage();await page.goto('https://www.baidu.com/',{
    waitUntil:'networkidle2'});await page.waitFor('#u1');// 得到百度右上角的标题和相应的URL网址const result = await page.evaluate(() => {
    let data = []; // 初始化空数组来存储数据let elements = document.querySelectorAll('#u1 > a'); // 获取所有元素for (var element of elements){
    let title = element.innerText; // 获取标题let url = element.href;//获取网址data.push({
    title,url}); // 存入数组}return data;});console.log(result);//打印出信息await page.waitFor(3000);await browser.close();
})();

这个是我运行后得到的数据:
在这里插入图片描述
解析开始啦:
1、首先在第6行goto()函数中,我添加了waitUntil:'networkidle2’这个参数,是为了等待网络没有连接,因为我们抓取信息当然要全部加载出来的

2、第9行中,使用page.evaluate()函数,在里面我使用了原生的js语法document.querySelectorAll()来获取右上角包含标签a的所有元素,返回一个NodeList的对象,这个js只能在evaluate中使用,在外边使用会报错。

3、12-16行,使用for循环来遍历出所有的a元素,并得到标题和URL添加到列表中,进行返回,这个基本就是一个最简单的爬虫了,当然高深一些的并不止于这些,爬到数据后加入数据库,存放到文件中。。等等,后续慢慢学习

2、让脚本更简洁,从上面脚本中我们知道是需要得到所有的元素,进行遍历取值,所以我们可以使用map()函数进行改进

const puppeteer = require('puppeteer');(async () => {
    const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://www.baidu.com/',{
    waitUntil:'networkidle2'});await page.waitFor('#u1');// 得到百度右上角的标题和相应的URL网址const result = await page.evaluate(() => {
    let data = el => {
    return {
    title:el.innerText,url:el.href} };//设置提取函数let elements = [...document.querySelectorAll('#u1 > a')]; // 获取所有元素return elements.map(data);//遍历elements列表,得到标题和url});console.log(result);await page.waitFor(3000);await browser.close();
})();

看看结果,一模一样啊有木有:
在这里插入图片描述
1、是的,你可以看到evaluate中只需要3行代码就可以搞定,简洁吧!哈哈,不过用到的东西可是挺难得呢
2、第10行中先定义好map()需要执行的函数,因为要得到文本和标题,所以我写了两个,后面return中一定要写成类似于这种形式{title:el.innerText,url:el.href}才可以的呢。
3、第11行中使用原生js得到所有a标签的元素返回一个Nodelist的对象,使用 ”…“ 的语法来调用对象中所有a标签元素,“…”这个符号表示:数组/对象的扩展运算符,如果不懂得小伙伴自行去学习一下。
4、第12行使用map()函数进行操作,传入设置好的函数data,并且使用ruturn把新的值返回

就这样子,至于用哪种方法大家就自行选择吧,当然evaluate运行的js远不止于这些,这大概只是入门,到后期慢慢学习吧,嘿嘿

  相关解决方案