> 关注我的公众号：【编程朝花夕拾】，可获取首发内容。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9535587549734548a29e684fe67c1bf4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=x%2BVSwShcPoOU6GqUYmWUxXNHfmc%3D) ## 01 引言同事每天准点下班，而我还在加班写爬虫？项目Deadline逼近，数据却卡在网页结构里抽不出来？答案可能藏在`XPath`里。无论是爬虫、还是现在流行的大模型的`Agent`工作流，解析网页数据的工具都可能用到`Xpath`。`Xpath`到底是什么呢？ ## 02 Xpath简介 `XPath`是一种用于在`XML`和`HTML`文档中定位和遍历元素的语言。在`Web`开发中，`XPath`是非常重要的技能之一。掌握`XPath`的语法可以帮助开发人员更快速地解析和提取数据。有过`Jquery`基础的可能会更加容易上手一下，归根到底，就是定位网页中的`DOM`节点，取出自己想要的数据。现在主流的浏览器如`Chrome` 本身就支持`Xpath`的语法，更方面我们直接调试。 ## 03 基础语法 ### 3.1 语法 | 表达式 | 描述 | | -------- | ------------------------------------ | | nodename | 选取此节点的所有子节点。 | | / | 从根节点选取（取子节点）。 | | // | 从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置（取子孙节点）。 | | . | 选取当前节点。 | | .. | 选取当前节点的父节点。 | | @ | 选取属性。 | | \* | 通配符，匹配任何元素节点 | 值得注意的是：`//`忽略节点位置的 ### 3.2 表达式案例 | 路径表达式 | 结果 | | -------- | ------------------------------------------ | | dd | 选取所有名为 dd的节点 | | /dd | 选取根元素 dd | | dd/span | 选取属于 dd 的子元素的所有 span元素 | | //span | 选取所有 span子元素，而不管它们在文档中的位置 | | dd//span | 选择属于 dd 元素的后代的所有 span元素，而不管它们位于 dd之下的什么位置。 | | //@href | 选择包含href属性的所有节点。 | ### 3.3 浏览器中的使用语法： ```sh $x("xpath表达式"); ``` 例：获取所有包含href属性的节点 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/81bd5b60c4ac4e83949064b82580bdb7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=PXhkZ1bkDeoRk3bO%2B5mnK6gFoqY%3D) ## 04 【必学】5个神技语法很简单，如果要熟练使用，就需要多家练习。这里总结5个必学神奇，轻松驾驭80%的场景案例Html： ```html

内容1

Paragraph

链接跳转1

内容2

测试1
测试2
测试3
Paragraph测试3
测试4 链接跳转4

测试31
测试32
测试33
Paragraph测试33
测试34 链接跳转34

``` ### 4.1 「绝对路径」陷阱 > 假如我们需要会获取第一个`div`下的`p`标签 ```sh # 绝对路径 /html/body/div/p # 相对路径 //div[@class='content-1']/p ``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/99e025fa509f4ed1933360599d3979c5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=4BLK3fchNOzNCliRVD5gJR9xyC8%3D) 两种方案都可取代需要的节点，但是我们更推荐相对路径。因为绝对路径必须严格遵守节点顺序，一旦发生更改，就会造成取值错乱，可移植性很差，这也是90%的新手最容易踩的坑。 ### 4.2 模糊匹配黑科技 > 获取class名称包含content-的节点 ```sh //*[contains(@class, "content-")] ``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cc0c815745b04dfab1c9352e14f98222~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=x8M7iNrCQt9d926PMwuqkRt6zs8%3D) 这样可以轻松应对动态的节点。 ### 4.3 同级节点穿梭术 > 获取第二个div中h1标签之后的所有同级标签这里需要使用到`Xpath`的轴（`Axes`）。 ```java //div[2]/h1/following-sibling::ul ``` 其中`following-sibling`就是轴（`Axes`），表示后续的同级节点。其他的轴，后面我们单独来讲。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5e0d3b1056c4490c8bc6107935ab0914~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=EhyNE98bdq%2FfRNIhrhg6mx08t1E%3D) ### 4.4 条件筛选绝招 > 获取class为content-2的ul，下中间的两个li ```sh //ul[@class='content-2']/li[position()>1 and position() 获取链接跳转34的a标签 ```sh //a[text()='链接跳转34'] ``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/43d059b1e7574c49b12123fa3713225a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=NNpbanKeYif%2Frl79DL44PNWoDxU%3D) ## 05 高手的进阶技巧 Chrome开发者工具隐藏功能，按下`Ctrl+F`在Elements面板直接调试XPath，实时高亮匹配结果。 **性能优化三原则**： 1. 少用`//`多用具体标签 2. 善用轴（axis）减少扫描范围 3. 优先使用@id等唯一属性 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b0a9a50fe0c24647a556917b51a93493~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgU2ltb25LaW5n:q75.awebp?rk3s=f64ab15b&x-expires=1769747294&x-signature=TU3bdyaLQwCGi3dqjzd7rZPoN94%3D) ## 06 小结你的下一个爬虫项目，可能只需要10行代码。XPath就像数据世界的望远镜，当别人还在用肉眼搜寻数据时，你已经拥有了降维打击的能力。现在打开浏览器开发者工具，用`Ctrl+F`开启你的第一个XPath查询吧！