您的位置：首页网络编程JavaScriptnode.js→ Puppeteer 爬取动态生成的网页

　　更新时间：2018年11月14日 09:16:34 作者：Alone08

　　这篇文章主要介绍了Puppeteer 爬取动态生成的网页实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

　　首先，了解下我们的需求: 爬取zoomcharts文档中Net Chart目录下所有访问连接对应的页面，并保存到本地

　　首先，我们得研究透 ZoomCharts 页面如何加载，以及左侧导航的 DOM 树结构，才好进行下一步操作

　　页面首次加载，左侧导航第一个目录Introduction高亮，从控制台可看出，该元素增加了active类，同时li[data-section=net-chart]节点下只有一个元素节点a

　　点击Net Chart目录,Net Chart目录高亮，下拉显示子目录，查看控制台，其元素节点增加active类，并增加ul子元素节点, 此时，第一个子目录节点也只有一个子元素节点a

　　不难发现, 左侧目录是动态生成的，而不是静态写死的，只有点击父级目录，其子目录才会生成显示，同时，父级目录元素上的drop类表明存在子级目录

　　接下来所有代码都在main区域内完成， 完整代码可访问github代码仓库查看，下面仅列出每部分的思路

　　这部分涉及到DOM 操作, 只有在page.evaluate()中才能访问真实的DOM元素，同时，在page.evaluate()中不能直接调用外面定义的函数，可将函数传递进去，或将函数绑定到window对象上

　　当Net Chart 目录下所有a.drop元素点击过后，Net Chart目录下所有后代子目录都会加载生成，接下来操作就简单了

　　第一次使用Puppeteer也是磕磕绊绊，花费不少时间，期间也参考了不少文章，还需多多练习

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。