学习XPath助力爬取中秋各大电商平台数据

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

目录

  1. XPath是什么？
  2. 浏览器插件: XPath Helper
  3. XPath节点
  4. XPath语法
  5. XPath运算符
  6. 实战案例

XPath是什么？

  1. XPath是一门在XML文档中查找信息的语言。
  2. XPath提供的路径表达式方便我们在XML文档中选取节点或节点集合。
  3. XPath提供了大量的标准函数，如：处理字符串，数值，日期，时间，节点，逻辑关系等。
  4. XPath符合W3C标准。

浏览器插件: XPath Helper

我们通过浏览器插件来验证我们的写XPath语句是否成功更为方便。

  1. 在Chrome浏览器的商店搜索XPath Helper并添加。

image.png

  1. 打开目标网站后点击我们的插件图标呼出操作栏
    1. 操作栏左侧为XPath语句
    2. 操作栏右侧为匹配结果

image.png

XPath节点

对于XPath来说也是包含了节点，值，节点间的关系三部分。节点有元素，属性，文本，命名空间，指令，注释和根节点7类，节点间的关系有父子关系，兄弟关系，先辈关系，后代关系。

XPath语法

// 案例演示使用
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h3 style="font-weight: 500;">Hello XPath 1</h3>
        <h3 style="font-weight: 600;">Hello XPath 2</h3>
        <h3 style="font-weight: 600;">Hello XPath 3</h3>
    </div>
</body>
</html>
选取节点：
  1. 选取文档所有节点：Root node name
  2. 从根节点选取：/
  3. 从任意位置选择：//
  4. 选取当前节点：.
  5. 选取当前节点的父节点：..
  6. 选取属性： @
  7. 案例：
    1. 选取根元素：/html
    2. 从根元素开始选取div下的所有子元素：/html/body/div
    3. 从根元素开始选取div下的所有h3元素：/html/body/div//h3
    4. 从任意位置选取h3元素：//h3
    5. 从任意位置选取style属性：//@style
谓语：

缩小节点的选取到指定位置

  1. 选取div下第一个h3：/html/body/div/h3[1]
  2. 选取div下最后一个h3：/html/body/div/h3[last()]
  3. 选取div下倒数第二个h3：/html/body/div/h3[last()-1]
  4. 选取div下前两个h3：/html/body/div/h3[position()<3]
  5. 选取所有带style属性的h3：/html/body/div/h3[@style]
  6. 选取所有带style属性且值为600磅的h3：/html/body/div/h3[@style="font-weight: 600;"]
  7. 选取title元素和div下的所有子元素：/html/head/title | /html/body/div
选取未知节点：
  1. 匹配未知元素：*
  2. 匹配未知属性：@*
  3. 匹配任何类型的节点：node()

XPath运算符

图表来源：www.runoob.com/xpath/xpath…

运算符描述
计算两个节点集
+加法
-减法
*乘法
div除法
=等于
!=不等于
<小于
<=小于或等于
大于
>=大于或等于
or或
and与
mod计算除法的余数

利用中秋各大电商平台页面实战

目标：
  1. 获取搜索到的第一件商品的信息。
  2. 获取搜索到的前三件商品的信息。
  3. 获取搜索到的最后一件商品的信息。
  4. 获取搜索到的价格大于200元的商品信息。

淘宝平台实战：

s.taobao.com/search?q=中秋月饼

商品各字段匹配：
  1. 匹配商品名称： //div[@data-category="auctions"]/div[2]/div[2]/a
  2. 匹配价格： //div[@data-category="auctions"]/div[2]//div[@class="price g_price g_price-highlight"]/strong
  3. 付款人数： //div[@data-category="auctions"]/div[2]/div[1]/div[2]
  4. 匹配封面： //div[@data-category="auctions"]/div[1]//img/@src
匹配搜索到的第一个商品：
//div[@data-category="auctions"][1]

image.png

匹配搜索到的前三个商品：
//div[@data-category="auctions"][position()<=3]

image.png

匹配搜索到的最后一个商品：
//div[@data-category="auctions"][last()]

image.png

//div[@class="price g_price g_price-highlight"][strong>200]/../../..

image.png

备注： 我们也可以通过浏览器的开发者工具来直接获得XPath后再手工调整来节省时间，如下图所示。

  1. Copy XPath：//*[@id="bd672fe6-3dd0-475e-96db-4b0fe71f72eb"]/div[2]/div/div[1]/div/div/div/div[1]/a
  2. Copy full XPath：/html/body/div/div/section/section/main/div[2]/div/div/div[2]/div/div[1]/div/div/div/div[1]/a image.png

结语

通过浏览器的开发者工具我们可以看到选取节点的方式有selector，JSPath等，选择自己习惯用的就可以了，熟练的选取元素节点为你的爬虫添砖加瓦吧~~~

posted @   前端小鑫同学  阅读(4)  评论(0)  编辑  收藏  举报  
相关博文：
·  Selenium示例
·  Babel 插件开发&访问节点
·  XPath从入门到精通：基础和高级用法完整指南，附美团APP匹配示例
·  python爬虫 xpath入门与lxml库基本使用，我们一同学习xpath
·  09、数据提取_XPath
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae