SpiderFlow可视化爬虫教程3(如何使用xpath方式抓取html元素)

第一步：访问网站，查看一下网页内容，并了解标签结构。

目的是把如下图红框部分的每个标题和对应的URL地址爬下来

在如下图绿色框的那个链接右键，然后点击“检查“。
把鼠标指针放在红框的那个地方，左手边会高亮显示布局区域。

我们悬停到不同的li标签的时候，高亮显示的位置也在变化。
这说明，

标签里面的元素，就是我们要的数据。

展开第一个

标签
仔细看看如图框一一对应的颜色。绿色框表示标签，这三个标签表示3个链接。标签里面的href属性，就是我们想要的URL。

我们展开三个标签，发现，里面的白色的字就是链接的标题。

第二步：了解标签结构的层级关系。

这一步本质上很简单，浏览器有高亮显示布局功能，我们一眼就能看懂。
首先有两个

标签，红色框为父元素
标签。
绿色框为
• 标签，黄颜色的框为标签
  

  对应的元素是这样的，这里有两个红框，是因为有两个

  标签，我只选第一个
  标签而已。
  

  第三步：开始用xpath的方式抓取页面实操。（第四步来讲变量配置语法）

  首先一定是拖动小虫子设置URL。

  然后设置第一个变量。

  变量名：all_ul
  变量值：\${resp.xpaths('//*[@id="articleBox"]/ul')}
  

  

  设置第二个变量

  变量名：all_li	（所有li标签）
  变量值：${all_ul[i].xpaths('//li')}	
  循环变量：i
  循环次数：${all_ul.size()}	（所有ul标签个数）
  

  

  设置第三个变量

  变量名：all_a	（所有a标签）
  变量值：${all_li[j].xpaths('//a')}
  循环变量：j
  循环次数：${all_li.size()}	（所有li标签的个数）
  

  

  设置输出

  输出项      输出值 
  
  content    ${all_a[k].xpath('//a/text()')}
  url        ${all_a[k].xpath('//a/@href')}
  

  循环变量：k
  循环次数：${all_a.size()}
  

  点击启动爬虫的按钮以后，得到输出
  

  第四步：通过例子，学习xpath语法

  （1）首先从定义变量1这里开始讲
  
  ${resp.xpaths(’//*[@id=“articleBox”]/ul’)}

  ① 如上图，resp表示请求网站以后返回页面的内容。这是一个固定值，不需要我们自己定义。 resp.xpaths表示使用xpath的方式获取网页中的元素。它与resp.xpath的区别在于：resp.xpath只返回一个元素，resp.xpaths返回的是元素列表，这个元素列表可能装了多个元素，也可能只装了1个元素。

  ②其中： //*[@id=“articleBox”]/ul ，开头的双斜杠表示从指定的节点开始爬取，在这里 *[@id=“articleBox”] 就表示指定的节点，翻译过来就是说，没有指定某个元素必须是哪种标签，只要这个元素的属性id的值为articleBox就会被筛选。

  ③ 如果我写成这样：//div[@id=“articleBox”] , 那么就表示指定标签为div，并且它的属性id的值为articleBox的元素才会被筛选，很明显，这个星号表示任意的意思，@符号表示选择属性的意思，如果我写成@class，就表示筛选属性class的值为articleBox的元素。

  ④ 如果是写 ${resp.xpaths(’//*[@id=“articleBox”]’)}
  就会筛选入下图红框的这部分元素。
  

  ⑤ 如果写 ${resp.xpaths(’//*[@id=“articleBox”]/ul’)}

  表示筛选id为articleBox的元素的子元素，子元素为所有ul标签
  

  ⑥ 如果写 ${resp.xpaths(’//*[@id=“articleBox”]/ul[3]’)}
  只筛选第三个子元素
  

  ⑦ 如果写 ${resp.xpaths(’//*[@id=“articleBox”]/ul[3]/li’)}
  表示第三个ul标签里面的所有li标签，即绿色框的部分。
  

  ⑧ 注意，${resp.xpaths(’//*[@id=“articleBox”]/ul/li’)}，不要这么写，因为多个节点里面子元素是什么，没有这种说法。只能选定某个节点里面有多少个子元素。

  （2）从定义变量2里面开始讲解
  
  例子1：
  ${all_ul[i].xpaths(’//li’)}

  在这里，all_ul是 ”定义变量1“ 里面的一个变量，它包括了所有筛选出来的ul标签，记为all_ul。这个all_ul变量就如下图红框的内容。
  

  all_ul包含多个ul标签，所以all_ul[i] 表示第 i 个标签，这个 i 是从0开始数的。

  但是，在xpath中指定第几个元素，例如 //aa[x]/bb[y]/cc[z]/dd ，这里的第x，y，z个，这是从1开始数的。再例如，//aa[4]/bb[3]/dd[1]/dd 就表示第4个aa标签里面的第3个bb标签里面的第1个dd标签里面的所有dd标签。

  例子2：
  ${all_ul[3].xpaths(’//li’)}

  这整个变量就表示如下图绿色框的部分。第3个ul标签里面的所有li标签。
  

  第三个定义变量我就不讲解了，意思跟第二个定义变量的意思一样。

  （3）从输出变量开始讲解
  
  ${all_a[k].xpath(’//a/text()’)}
  我们知道all_a是从”定义变量3“那里拿出来的，表示所有的a标签。
  输出变量跟之前的定义变量不同的是，输出变量是输出单个元素的，所以是用xpath。上面的定义变量节点用的都是xpaths。

  在这里，使用xpath的时候（不是xpaths），务必从写多一次a标签，不能这么写：${all_a[k].xpath(’/text()’)}，虽然all_a[k]表示某一个a标签，但不能直接从里面筛选子元素，写多一次a标签，像这样子就对了：${all_a[k].xpath(’//a/text()’)}。

  这个**//a/text()**表示a标签里面夹着的文字。如下图表示
  
  我们让k等于2：
  ${all_a[2].xpath(’//a/text()’)} ，就相当于如下图的222
  

  ${all_a[2].xpath(’//a/@href’)}
  在这个输出值里面，//a/@href 就表示筛选a标签里面的href属性的值。
  好比如下图：
  

  第五步： 执行爬虫

  

  第六步：写入数据库

  也可以参照本人文章：https://blog.csdn.net/Xeon_CC/article/details/122705945
  的第三步。

  先打开navicat，设计表，然后保存，表明为car_home
  
  设置数据源

  数据源名称：car_source
  DriverClassName： com.mysql.jdbc.Driver
  数据库连接：jdbc:mysql://localhost:3306/rain_db
  用户名：root
  密码：123456
  

  
  设置输出

  数据源：car_source
  表名：car_home
  

  

  点击开始爬虫：
  数据出来了，成功写入到数据库。