年轻人的第0条爬虫 | 如何最快理解工具思维_以八爪鱼为例

(请去网易云音乐听原版，QQ音乐属实拉跨)

软件和代码大多数情况都只是用于解决问题的工具。对于使用者而言，理解工具的设计思路和使用逻辑，而不是纠结于工具使用的技巧tricks，才能快速上手并对同类型工具触类旁通，用最高效率解决问题。

0. 背景知识/准备

八爪鱼网页数据采集器，是一款使用简单、功能强大的网络爬虫工具，完全可视化操作，无需编写代码，内置海量模板，支持任意网络数据抓取。

可以简单地理解为，八爪鱼把代码封装为模块，通过模块拼接搭建流程图，帮助小白批量获取网页中的html代码并清洗为数据，实现批量获取评论、列表信息等简单的数据爬取。

流程图的亚子

0.1 DOM 树

DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。借助DOM Tree，我们能直接而且简易的操作HTML页面上的每个标记内容。

（这里模糊了DOM树和html结构的概念，仅为方便理解结构）

DOM树展示了html页面（即通常意义上理解的“网页”）的基本结构，由标签组成。

引用自深圳大学《数据抓取与清洗》课程课件

标签之间是包含/被包含和并列的关系，因此可以逐级展开；标签有不同的类型，带有属性值。

我们需要抓取的数据就隐藏在具有某些特征的标签中。

浏览器根据html代码解析出DOM树，进而才能渲染出页面中的元素。也就是说，页面的布局和标签的位置关系是息息相关的。

0.2 Chrome浏览器

其实大部分浏览器都能用，但是Chrome应该是最受代码民工们喜爱全能的一款。其他浏览器如果能找到相应的功能也不影响使用，此处仅以Chrome为例。

• 调试模式 在Chrome中按f12(部分笔记本是fn+f12)可以打开调试模式，看到html代码的详细结构，便于我们观察和定位标签，理解DOM树。选中标签，网页中对应被渲染的元素会高亮。

• 选中元素 按Ctrl+Shift+C或点击调试界面左上角图标，可以切换至选中元素模式，点击页面中的元素可以看到代码中相应的标签。如果不点击，让光标悬浮在元素上，也可以看见元素相关信息的浮窗。

按钮位置

选中效果

• xpath插件（选用） xpath是与DOM树结构有关的一种相对路径，便于定位元素。通俗地讲，我们打开电脑文件夹时的路径也是一种类似xpath的相对路径，文件夹的储存架构本身就是树形结构。插件比较多，可自行上网查找。等我有空再具体分析xpath的应用案例，这周代码敲不完了。 XPath教程 https://www.w3school.com.cn/xpath/index.asp

0.3 勇敢的心

• 善用搜索引擎 有问题先尝试查询可能已有的解答，你踩过的坑大概率有前人踩过。当然也要抱着辨证眼光看待，放错误的错误解决方式的人才实在太多了！！！！ • 耐心试错 代码或流程图无法一次跑通，是 非常！非常！非常！ 正常的事情，所以一定要耐心、平心静气地把问题找出来，不然就会出现和我一样通宵debug第二天早上发现把left跟right写反的问题 • 通过观察运行情况寻找问题 有时候问题不是一眼能看出来的，需要我们在运行过程中观察，比如翻页、划动之类的操作可能应用位置不对或者过多/过少了，这就需要我们在运行的时候观察浏览器是怎么动的。这类工具的本质是模拟人的行为，我们可能从行为不一致的地方发现问题。 • 先确认可用部分再修改不可用部分 东改一下，西改一下也很难具体定位问题。所以需要先保证有一部分完全能用，必不可能出错，出错就把电脑吃掉以后再继续修改别的部分，否则可能会出现一直在正确的part修改，却被没发现错误的part干扰的问题。 • 抱大腿 不懂就问，懂得都懂。

1. 理解工具思维

1.1 通读软件界面和菜单

无论是什么工具，尝试尽所有的交互和功能是了解软件使用逻辑的最好方式。哪怕是看不懂的选项和功能，也可以百度或暂时跳过，先大概了解工具能干些啥。

比如八爪鱼的ajax加载。ajax是一种网页的一种异步加载机制，简单说就是不一次性展示所有数据，这就属于可以先记住，要用再学的部分。

1.2 工具的本质

爬虫编程与爬虫软件的本质是模拟人在浏览器中浏览的过程。爬虫编程是模仿人发送和解析请求。而八爪鱼模仿人的视野选择判断哪些数据是要收集的，再用人的方式完成滚动加载、点击按钮、翻页等操作。

本质上爬虫只是代替人意志的工具人，任劳任怨地帮你把重复性工作高效完成。所以在使用和修改的过程中，也是会尽量遵循人的行为习惯的。

1.3 善用已编写好的傻瓜功能

在八爪鱼中，傻瓜功能主要是模板和“自动识别网页”。

模板只要不过时，一般都可以直接用，软件中也有详细的引导。

自动识别网页主要是总会在一些比较奇特的结构部分出错，这时候就需要手工改正，主要会观察xpath的路径是否被软件识别错。自动识别得到的xpath一般是用固定序号编写的，比较死板。

在修改错误时也可以观察自动识别中已确认可用的部分，看看对于这个列表而言，正确的xpath大概是怎样编写的，在软件识别出的xpath基础上进行修改，这也符合先确认可用再修改不可用的原则。

2. 观察结构找同异

需要爬取的数据标签大多有相似的结构，以下介绍几种可行的判断标准，总的来说都会是某种列表中。有可能是传统的有序或无序列表中，也有可能是依次排列的块级元素中。

2.1 标签名

• <ul> 是页面中的无序列表。列表中的每一项使用<li> • <ol> 是页面中的有序列表。列表中的每一项使用<li> • <div> 以下直接引用定义

HTML<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

• <p> 表示页面中的段落。 • <h几> 表示页面中的标题。“几”表示标题字体大小，1-6数字越小字体越大。 • …… 还有很多其他种类的标签，这里只是列举了几种一般会用来作为列表收纳数据标签的标签，具体可自行查阅。

参考链接：

HTML 段落 https://www.w3school.com.cn/html/html_paragraphs.asp

HTML 块 https://www.w3school.com.cn/html/html_blocks.asp

HTML 列表 https://www.w3school.com.cn/html/html_lists.asp

HTML 标题 https://www.w3school.com.cn/html/html_headings.asp

2.2 标签属性

不同种类的标签往往有不同种类的属性。比较通用的用于辨识某特殊种类标签的属性就是类class和id。

• class class用于表示同一类标签，有了class的标签可以被统一使用样式，在这里最大的用处是辨别标签。同一个标签的class属性可能有多个值。 假设在学校网站中爬取学生信息（当然这基本不可能），比如学生的标签中就应该有class="学生"，教师的标签中有class="教师"；网新系学生的标签的“class”可能还包含"网新系"，计科系学生的标签的class相应可能包含"计科系"。 使用class可以快速定位到某一类需要被抓取的元素，也方便编写xpath识别。 • id HTML id 属性用于 为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。

参考链接：

HTML 属性 https://www.w3school.com.cn/html/html_attributes.asp

HTML 类 https://www.w3school.com.cn/html/html_classes.asp

HTML id 属性 https://www.w3school.com.cn/html/html_id.asp

2.3 相对位置

有些情况下，数据存储在同类标签下的更深层级的标签中，这时候就需要使用相对位置判断。这里很难解释清楚，所以接下来用一个作业进行讲解。

• 固定的序号或间隔（如 /div[1] ) 这种情况中，数据标签可能是大标签下的第x个小标签。 • 节点/元素间的父子亲属关系（xpath中的轴）比较复杂，等我用会了再说。

3. 案例解释

问题：爬取爱奇艺电视剧列表中，每个电视剧的信息。

1. 打开入口页面 https://v.qq.com/channel/tv?_all=1&channel=tv&listpage=1&sort=19
2. f12打开调试模式，可以选中包含所有电视剧item的大框。在对应的代码部分中可以看到，大框最外部是一个div，class="mod_figure mod_figure_v_default mod_figure_list_box"。

其中又包含了许多小div，class="list_item"，没错，这应该就是指代每个电视剧的卡片item了。

那么爬取电视剧数据的循环列表应该就是这个大框，xpath可能是//div[@class="mod_figure mod_figure_v_default mod_figure_list_box"]/div，当然还需要继续验证。

1. 打开list_item观察结构的同时也要对应观察右边高亮的元素具体是哪些。大部分数据都不难定位，比如可以看见“电视剧标题”应该是list_item展开后的第一个a标签的title属性，或第一个div块下第一个a标签的title属性或文字部分，都可以尝试编写相对于列表的xpath，如第一个就是/a[1]，抓取数据方式选择“属性title的值”。

1. 再举一例。想抓取每个电视剧卡片右上角的标识，发现选择元素选不中。于是可以继续打开代码中的标签，逐级查找高亮部分，最后定位至其中一个VIP标识的img标签的class属性为"mark_v mark_v_VIP"，这里的class有两个属性值，猜测第二个属性值表示VIP标志。

再往下查找，发现“超前点播”标识的class="mark_v mark_v_超前点播"，那么此时这类标识的共同特征已经很明显了，是class="mark_v"，编写xpath时只需要针对这个特性即可，然后再通过观察发现可以用alt属性值区分具体标签。

4.总结

以上是我自己对于“理解工具，快速上手”的一些思考，有疑问处欢迎后台留言或私信。本周代码抄不完了

下次有空再写一些工具使用的技巧。