内容简介:Puppeteer 相关介绍与安装不过多介绍,可通过以下链接进行学习首先,了解下我们的需求: 爬取zoomcharts 文档中首先,我们得研究透 ZoomCharts 页面如何加载,以及左侧导航的 DOM 树结构,才好进行下一步操作
Puppeteer 相关介绍与安装不过多介绍,可通过以下链接进行学习
二、爬取动态网页
1. 需求
首先,了解下我们的需求: 爬取zoomcharts 文档中 Net Chart
目录下所有访问连接对应的页面,并保存到本地
2. 研究 ZoomCharts 文档页面结构
首先,我们得研究透 ZoomCharts 页面如何加载,以及左侧导航的 DOM 树结构,才好进行下一步操作
-
页面首次加载
页面首次加载,左侧导航第一个目录Introduction
高亮,从控制台可看出,该元素增加了active
类,同时li[data-section="net-chart"]
节点下只有一个元素节点a
-
点击
Net Chart
目录
点击 Net Chart
目录, Net Chart
目录高亮,下拉显示子目录,查看控制台,其元素节点增加 active
类,并增加 ul
子元素节点, 此时,第一个子目录节点也只有一个子元素节点 a
- 结论
不难发现, 左侧目录是动态生成的,而不是静态写死的,只有点击父级目录,其子目录才会生成显示,同时,父级目录元素上的 drop
类表明存在子级目录
3. 编写主程序
通过上面分析,得出大概流程如下
- 从上到下,遍历
Net Chart
目录的 DOM 树,当找到a.drop
的元素节点,模拟鼠标点击事件click
,生成子目录节点 - 找到
Net Chart
目录下所有的a
链接,生成一个数组 - 遍历数组,访问每一个子目录页面,保存页面的 html 文件到本地
接下来实现每个具体流程
- 项目初始化
安装 puppeteer
, rimraf
(文件夹操作时需用到)
npm i -S puppeteer rimraf 复制代码
新建 test.js
文件并引入
const puppeteer = require('puppeteer'); const chalk = require('chalk'); const path = require('path'); const https = require('https'); const fs = require('fs'); const rm = require('rimraf'); const settings = { headless: false } function resolve(dir, dir2 = '') { return path.posix.join(__dirname, './', dir, dir2); } async function main () { const browser = await puppeteer.launch(settings); // 创建一个Browser 对象 try { const page = await browser.newPage(); // 使用 Browser 创建 Page page.setDefaultNavigationTimeout(600000); // 监听 console page.on('console', msg => { for (let i = 0; i < msg.args().length; ++i) { console.log(`${i}: ${msg.args()[i]}`); } }); <!-- main start --> // main 区域 <!-- end start--> console.log('服务正常结束') } catch (error) { console.log('服务出现错误:') console.log(error) } finally { } } main() 复制代码
接下来所有代码都在 main
区域内完成, 完整代码可访问 github代码仓库 查看,下面仅列出每部分的思路
-
创建文件夹,用于保存爬取的文件
- 定义文件输出路径
- 根据路径生成文件夹
- 当文件夹已经存在,先删除,再新建
-
实现 Net Chart 目录下所有
a.drop
元素的点击事件
这部分涉及到DOM 操作, 只有在 page.evaluate()
中才能访问真实的 DOM
元素,同时,在 page.evaluate()
中不能直接调用外面定义的函数,可将函数传递进去,或将函数绑定到 window
对象上
await page.evaluate(async () => { const rootNode = document.querySelector('#menu > ul > li:nth-child(5) > ul > li:nth-child(5)'); await window.walkDOM(rootNode) }) 复制代码
此时,绑定到 window
对象上的 walkDOM
函数需要在 page.evaluateOnNewDocument
函数中定义才能生效
await page.evaluateOnNewDocument(() => { // 遍历DOM window.walkDOM = (node) => { if (node === null) { return } if (node.tagName === 'A' && node.className.indexOf('drop') > -1) { node.click() // 点击事件 } node = node.firstElementChild while (node) { walkDOM(node) node = node.nextElementSibling } } }) 复制代码
当Net Chart 目录下所有 a.drop
元素点击过后, Net Chart
目录下所有后代子目录都会加载生成,接下来操作就简单了
-
获取Net Chart 目录下所有 a 元素
- 通过
document.querySelectorAll()
查找到所有a
元素,保存到数组 - 遍历数组,对数组每一项进行处理成
{href: '',text: ''}
对象 - 返回对象数组
- 通过
-
遍历对象数组, 访问每一个链接,下载其HTML文件
img
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 实战生成对抗网络(二):生成手写数字
- 实战生成对抗网络[2]:生成手写数字
- 实战生成对抗网络(三):DCGAN
- 深度学习实战 numpy生成实数序列
- [项目实战][原创]PHP生成全景图(krpano)
- 用机器学习生成披头士的歌词 | 项目实战
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
马化腾自述-我的互联网思维
赵黎 / 石油工业出版社 / 2014-8-1 / 35
马化腾自述:我的互联网思维》讲述了些人说移动互联网就是加了“移动”两个字,互联网十几年了,移动互联网应该是个延伸。我的感受是,移动互联网远远不只是一个延伸,甚至是一个颠覆。互联网是一个开放交融、瞬息万变的大生态,企业作为互联网生态里面的物种,需要像自然界的生物一样,各个方面都具有与生态系统汇接、和谐、共生的特性。开放和分享并不是一个宣传口号,也不是一个简单的概念。开放很多时候被看作一种姿态,但是我......一起来看看 《马化腾自述-我的互联网思维》 这本书的介绍吧!