Node+puppeteer学习笔记（八）--API问题解决--使用 ” evaluate “函数执行自定义js脚本

官方英文版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远不止于这些，这大概只是入门，到后期慢慢学习吧，嘿嘿