xpath Api 实战完整教程

目标

1. xpath API 整理
2.减少学习xpath语法成本,只需要用到时查询一下就可以
3.后面会慢慢补充个人经验一栏

1.基于w3school xpath 教程
2.基于chromexpath语法工具
3.基于个人提高效率操作

ps

最近因为常常用到xpath 语法,想要搜索对应的api ,发现自己的关键词始终无法搜索到一个比较全面的xpath api,且搜到的大多数只是介绍,没有实战,这样对我这样的小白来说,比较不友好,随着项目的日渐使用,我也积累出来用xpath的技巧,所以特意写这篇整理好的 xpath api 来回报之前解决问题时,搜到的那些前辈的博客帮助我解答了疑惑。

前期准备

1.实战 页面链接

https://blog.csdn.net/mengxiangxingdong/article/details/86671879
如果链接改变 请下载博主缓存好的页面
链接:https://pan.baidu.com/s/1Zt9Y4GRkS3NySExeucM-Yw
提取码:of95
复制这段内容后打开百度网盘手机App,操作更方便哦

2.测试语法工具

按F12 ,打开console,如下图
在这里插入图片描述

3.选取之后怎么获取他们的值属性等等

正常xpath 返回的是一个数组,所以,我们要选取数组下标中的一个存在的元素,然后 查看他们拥有的属性 .属性就可以了
例如 : 选取页面body元素的class属性的值
在这里插入图片描述

术语介绍(了解的可以跳过)

在 XPath 中,有七种类型的节点:元素、属性、文本、命名空间、处理指令、注释以及文档节点(或称为根节点)。
1.元素

就是所有的标签 例如 a标签 b标签 自定义的标签也算

2.属性

这个比较好理解,例如a标签 有href属性 ,title属性

3.文本

就是文本

4.命名空间

5.处理指令

6.注释

7.文档节点(或称为根节点)

html 基本上就是html标签是根节点 ,xml就不一定了

还是不清楚的 可以参考这个教程 https://www.runoob.com/xpath/xpath-nodes.html

实战开始

1.路径表达式
1.1 nodename

描述: 选取此节点的所有子节点。
实战: 选取页面中的所有 html元素

$x("//html")

效果图:
在这里插入图片描述

1.2 /

描述: 从根节点选取。
实战: 从根节点(你前面选中的节点,例如前面选中了html)的所有body元素

$x("//html/body")

效果图:
在这里插入图片描述

1.3 //

描述: 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。
实战: 选取页面中的所有 body

$x("//body")

效果图:
10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n,size_16,color_FFFFFF,t_70)

1.4 .

描述: 选取当前节点。
实战: 选取当前页面的document

$x(".");

效果图:

在这里插入图片描述

1.5 …

描述: 选取当前节点的父节点。
实战: 选取body的上一级 也就是html

$x("//body/…");

效果图:
在这里插入图片描述

1.6 @

描述: 选取属性
实战: 选取body的class属性

$x("//body/@class")[0]

效果图:
在这里插入图片描述

1.7 |

描述: 选取若干个路径,例如a | b 就是寻找a和b两个元素
实战: 选取页面中的所有div元素和a元素

$x("//div | //a")

效果图:
在这里插入图片描述

1.8 *

描述: 匹配任何元素节点
实战: 选取文档中的所有的元素

$x("//*")

效果图:
在这里插入图片描述

1.9 @*

描述: 匹配任何属性节点。
实战: 选取文档中的所有属性节点

$x("//@*")

效果图:
在这里插入图片描述

1.10 node()

描述: 匹配任何类型的节点。
实战: 选取文档中的所有的节点(也就是xpath 所定义的7种节点)

$x("//node()")

效果图:
在这里插入图片描述

2.谓语与常用函数

谓语用来查找某个特定的节点或者包含某个指定的值的节点。
谓语被嵌在方括号中。
参考 api https://www.runoob.com/xpath/xpath-functions.html#accessor

2.1 字符串处理
2.1.1 string()

说明:获取选取的节点的 字符串
实战:选中字符串为"程序员2019上半年计划"的元素

$x("//*[contains(string(),‘程序员2019上半年计划’)]")

效果图
在这里插入图片描述

2.1.2 text()

说明:与string()相比 它仅仅返回所指元素的文本内容
实战:选中字符串为"程序员2019上半年计划"的元素

$x("//*[contains(string(),‘程序员2019上半年计划’)]")

效果图
在这里插入图片描述

2.2 选择器
2.2.1 contains(x,str)

说明:选择x中包含str的节点
实战:选中字符串为"程序员2019上半年计划"的元素

$x("//*[contains(string(),‘程序员2019上半年计划’)]")

效果图
在这里插入图片描述

相关技巧

1.chrome 快速选择当前元素
假如:要选择在这里插入图片描述

那么在这里插入图片描述

参考教程

XPath 语法
	http://www.w3school.com.cn/xpath/xpath_syntax.asp
XPath Axes(轴)
	http://www.w3school.com.cn/xpath/xpath_axes.asp
XPath 运算符
	http://www.w3school.com.cn/xpath/xpath_operators.asp
函数参考手册
	http://www.w3school.com.cn/xpath/xpath_functions.asp#accessor
	https://www.w3.org/2005/xpath-functions/

参考博客

XPath中的text()和string()区别
https://blog.csdn.net/weixin_39285616/article/details/78463091

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值