目标
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")
效果图:
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