xpath Api 实战完整教程

古城微笑少年丶 2022-01-27 06:13 244阅读 0赞

### 目标 ###

##### 1. xpath API 整理 #####

##### 2.减少学习xpath语法成本，只需要用到时查询一下就可以 #####

##### 3.后面会慢慢补充个人经验一栏 #####

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

### ps ###

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

### 前期准备 ###

#### 1.实战 页面链接 ####

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

##### 2.测试语法工具 #####

按F12 ，打开console，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70]

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

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

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

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

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

2.属性

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

3.文本

> 就是文本

4.命名空间

5.处理指令

6.注释

7.文档节点（或称为根节点）

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

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

### 实战开始 ###

#### 1.路径表达式 ####

##### 1.1 nodename #####

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

> $x("//html")

效果图：  
![在这里插入图片描述][20190525175150264.png]

##### 1.2 / #####

描述： 从根节点选取。  
实战： 从根节点（你前面选中的节点，例如前面选中了html）的所有body元素

> $x("//html/body")

效果图：  
![在这里插入图片描述][2019052517510590.png]

##### 1.3 // #####

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

> $x("//body")

效果图：  
![10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n,size\_16,color\_FFFFFF,t\_70)][10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70]

##### 1.4 . #####

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

> $x(".")；

效果图：

![在这里插入图片描述][20190525173553790.png]

##### 1.5 … #####

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

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

效果图：  
![在这里插入图片描述][20190525174305324.png]

##### 1.6 @ #####

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

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

效果图：  
![在这里插入图片描述][20190525174847300.png]

#### 1.7 | ####

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

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

效果图：  
![在这里插入图片描述][20190525180520817.png]

#### 1.8 \* ####

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

> $x("//\*")

效果图：  
![在这里插入图片描述][20190525181035625.png]

#### 1.9 @\* ####

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

> $x("//@\*")

效果图：  
![在这里插入图片描述][20190525195920882.png]

#### 1.10 node() ####

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

> $x("//node()")

效果图：  
![在这里插入图片描述][2019052520023196.png]

#### 2.谓语与常用函数 ####

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

##### 2.1 字符串处理 #####

###### 2.1.1 string（） ######

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

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

效果图  
![在这里插入图片描述][20190525235907362.png]

###### 2.1.2 text（） ######

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

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

效果图  
![在这里插入图片描述][20190526000355727.png]

##### 2.2 选择器 #####

###### 2.2.1 contains（x，str） ######

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

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

效果图  
![在这里插入图片描述][20190526000355727.png]

### 相关技巧 ###

1.chrome 快速选择当前元素  
假如：要选择![在这里插入图片描述][20190526000735467.png]

那么![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70 1]

### 参考教程 ###

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][https_blog.csdn.net_weixin_39285616_article_details_78463091]

[w3school xpath]: http://www.w3school.com.cn/xpath/xpath_syntax.asp
[https_blog.csdn.net_mengxiangxingdong_article_details_86671879]: https://blog.csdn.net/mengxiangxingdong/article/details/86671879
[https_pan.baidu.com_s_1Zt9Y4GRkS3NySExeucM-Yw]: https://pan.baidu.com/s/1Zt9Y4GRkS3NySExeucM-Yw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70]: /images/20220127/de46cbed2888491bbada185339f062a7.png
[20190525175802245.png]: /images/20220127/1a619c7795714e4b81c2d53b2303f383.png
[https_www.runoob.com_xpath_xpath-nodes.html]: https://www.runoob.com/xpath/xpath-nodes.html
[20190525175150264.png]: /images/20220127/21595ca63b354ef8b79a8ece1008cf30.png
[2019052517510590.png]: /images/20220127/d21340b4815b417eb97b7d6c2c458043.png
[10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70]: /images/20220127/c0875fd120d04c3ca575878413407674.png
[20190525173553790.png]: /images/20220127/7797c493ff694f27b15ba17cd0abdf39.png
[20190525174305324.png]: /images/20220127/d60ea068144147f09de887094bb153bf.png
[20190525174847300.png]: /images/20220127/1ae7c8b7f46f4afd8d090787dd2045d9.png
[20190525180520817.png]: /images/20220127/8b97d5f0cac544f588e6850559c23116.png
[20190525181035625.png]: /images/20220127/194b9596de9b47479512b538f8d16b1e.png
[20190525195920882.png]: /images/20220127/98887eb8660b4800a9b6712fc78f0684.png
[2019052520023196.png]: /images/20220127/3d2a0222cfe34557aed102ba079d7e1b.png
[https_www.runoob.com_xpath_xpath-functions.html_accessor]: https://www.runoob.com/xpath/xpath-functions.html#accessor
[20190525235907362.png]: /images/20220127/94d6a91a96bd4381855c3a0e018f5d90.png
[20190526000355727.png]: /images/20220127/0729af5c51ca4eff826692d79f266d8a.png
[20190526000735467.png]: /images/20220127/95a789830e104399abfb720bf197aa06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmd4aWFuZ3hpbmdkb25n_size_16_color_FFFFFF_t_70 1]: /images/20220127/a9b547a4de71466b870b8288082a1b8e.png
[https_blog.csdn.net_weixin_39285616_article_details_78463091]: https://blog.csdn.net/weixin_39285616/article/details/78463091