nodejs抓取动态网页(之前第一篇教程.js爬虫入门（一）爬取静态页面)

　　nodejs抓取动态网页(之前第一篇教程.js爬虫入门（一）爬取静态页面)

　　第一篇爬虫教程node.js爬虫入门（一）爬取静态页面讲解了静态网页的爬取，很简单，但是如果遇到一些动态网页（ajax），直接使用前面的发送请求方法获取不到我们想要的数据，这时候需要爬取动态网页，selenium和puppeteer都不错。

　　在这里推荐 Puppeteer，不是为了别的，只是因为它是 Google 自己的并且一直在维护更新。下面是翻译的官方文档介绍

　　Puppeteer 是一个 Node 库，通过 DevTools（开发者工具）协议提供了一系列高级接口来控制 Chrome 或 Chromium（谷歌开源）。默认以headless模式运行（无浏览器UI界面），也可以通过配置以普通模式运行。

　　它可用于：

　　首先，我们必须先安装它，然后才能使用它。最新的Chromium会默认安装下载，大小约300M。

　　npm install puppeteer

复制代码

　　如果你的机器上已经有较新版本的chrome，则只能安装core版本，但是启动puppeteer时需要配置本地chrome的路径。

　　npm install puppeteer-core // 核心版本

复制代码

　　假设我们要爬取拉勾的前端招聘信息。这是一个动态页面。使用此示例尝试抓取。

　　因为chrome操作都是异步操作，为了避免回调地狱，推荐使用es7的async await。这种语法具有很高的可读性，官方文档也是如此。

　　首先使用puppeteer启动浏览器，打开动态页面

　　需要注意的是，如果使用的是本地浏览器，则需要在启动浏览器配置中传入本地chrome路径

　　const browser = await puppeteer.launch({

executablePath: 'C:/Users/Administrator/AppData/Local/Google/Chrome/Application/chrome.exe'

})

复制代码

　　在chrome环境中执行函数，获取需要的数据，然后返回到node的执行环境

　　上图可以看到我们需要的数据的dom位置。在chrome环境执行的函数中，我们需要获取和整理需要的数据。

　　let list = document.querySelectorAll('.s_position_list .item_con_list li')

let res = []

for (let i = 0; i < list.length; i++) {

res.push({

name: list[i].getAttribute('data-positionname'),

company: list[i].getAttribute('data-company'),

salary: list[i].getAttribute('data-salary'),

require: list[i].querySelector('.li_b_l').childNodes[4].textContent.replace(/ |\n/g, ''),

})

}

return res

复制代码

　　这里有一个调试技巧，我们可以在chrome控制台中直接编写获取数据的函数，方便调试

　　最后附上完整代码

　　const puppeteer = require('puppeteer');

(async () => {

// 启动浏览器

const browser = await puppeteer.launch({

headless: false, // 默认是无头模式，这里为了示范所以使用正常模式

})

// 控制浏览器打开新标签页面

const page = await browser.newPage()

// 在新标签中打开要爬取的网页

await page.goto('https://www.lagou.com/jobs/list_web%E5%89%8D%E7%AB%AF?px=new&city=%E5%B9%BF%E5%B7%9E')

// 使用evaluate方法在浏览器中执行传入函数（完全的浏览器环境，所以函数内可以直接使用window、document等所有对象和方法）

let data = await page.evaluate(() => {

let list = document.querySelectorAll('.s_position_list .item_con_list li')

let res = []

for (let i = 0; i < list.length; i++) {

res.push({

name: list[i].getAttribute('data-positionname'),

company: list[i].getAttribute('data-company'),

salary: list[i].getAttribute('data-salary'),

require: list[i].querySelector('.li_b_l').childNodes[4].textContent.replace(/ |\n/g, ''),

})

}

return res

})

console.log(data)

})()

复制代码

　　操作结果

　　到这里，动态网页的爬取也已经完成了，但是puppeteer的功能远不止这些。它还具有许多可以使用的强大 API。您可以移至官方文档。

　　第三期会讲​​如何定时执行爬虫并存入数据库。