XPath 在线查询工具使用教程
什么是 XPath？
XPath（XML Path Language）是一种用于在 XML 和 HTML 文档中定位节点的查询语言。它通过路径表达式来选取文档中的节点或节点集合，是 Web 开发、数据提取和自动化测试中不可或缺的工具。
XPath 支持多种查询方式，包括元素选择、属性选择、文本内容匹配、条件过滤等，能够精确地从复杂的文档结构中提取所需数据。
ToolYou XPath 工具功能
📄 XML/HTML 文档输入
左侧面板支持粘贴或输入 XML/HTML 文档，内置 CodeMirror 编辑器提供语法高亮和行号显示，方便查看和编辑代码结构。
🔍 XPath 表达式查询
在右侧输入 XPath 表达式，如 //book/title 或 //div[@class='content']，工具会实时计算并高亮显示匹配的节点。
📋 常用 XPath 示例
内置常用 XPath 表达式一键应用，涵盖属性选择、文本匹配、索引定位等常用场景，帮助快速上手。
🎨 节点高亮显示
匹配到的 XML/HTML 节点会以醒目的颜色高亮显示，直观展示查询结果在文档中的位置。
📊 结果统计
实时显示匹配节点数量，支持查看选中节点的路径、标签名、属性值等详细信息。
🔄 一键操作
支持格式化 XML、复制结果、加载示例、清空内容等功能，提升使用效率。
如何使用 XPath 工具？
打开页面：访问 /xpath 或搜索「XPath 在线工具」
输入文档：在左侧编辑器粘贴 XML 或 HTML 代码
输入 XPath：在右侧输入框填写 XPath 表达式
查看结果：匹配节点自动高亮，右侧显示详细信息
常用操作
格式化：点击「格式化」按钮，自动整理 XML/HTML 代码格式
加载示例：点击「示例」按钮，快速加载测试文档
复制：点击结果旁的复制按钮，一键复制 XPath 表达式
清空：点击「清空」按钮，清除所有输入内容
XPath 常用语法速查
基础路径表达式
表达式 说明 示例
//tag 选取所有指定标签 //div 选中所有 div 元素
/tag 从根节点选取 /html/body 选中 body 元素
. 当前节点 ./child 选取子节点
.. 父节点 .. 选取父元素
属性选择
表达式 说明 示例
@attr 选取指定属性 //@id 选取所有 id 属性
[@attr='value'] 按属性值筛选 //input[@type='text']
contains() 属性包含文本 //div[contains(@class,'box')]
文本内容匹配
表达式 说明 示例
text() 匹配文本内容 //title[text()='首页']
contains(text(),...) 文本包含内容 //a[contains(text(),'点击')]
轴定位（Axis）
表达式 说明 示例
ancestor:: 所有祖先节点 //li/ancestor::ul
parent:: 父节点 //span/parent::div
child:: 子节点 //ul/child::li
following-sibling:: 后续同级节点 //li[2]/following-sibling::li
谓词条件
表达式 说明 示例
[n] 第 n 个子节点（从1开始） //div[2] 选第二个 div
[last()] 最后一个子节点 //li[last()] 选最后一个 li
[position()>n] 位置条件判断 //li[position()>2]
[contains(...)] 包含函数 //div[contains(@class,'active')]
XPath 常见应用场景
网页数据抓取：从 HTML 页面中提取特定元素内容
自动化测试：Selenium、Puppeteer 等工具使用 XPath 定位页面元素
XML 数据处理：解析和查询 XML 配置文件、数据文件
浏览器调试：Chrome DevTools 控制台使用 XPath 查询 DOM
爬虫开发：定向提取目标网页的文本、链接、图片等资源
常见问题
Q: XPath 和 CSS 选择器有什么区别？
A: XPath 功能更强大，支持方向遍历（父节点、兄弟节点）、文本匹配、条件判断等；CSS 选择器语法更简洁，但不支持向上遍历。XPath 适用于复杂场景，CSS 选择器适合简单定位。
Q: 为什么我的 XPath 查询结果为空？
A: 可能原因包括：XPath 语法错误、文档结构不匹配、命名空间未正确处理。建议使用「示例」功能测试基础表达式，逐步排查问题。
Q: XPath 表达式中的 // 和 / 有什么区别？
A: // 表示从文档任意位置开始匹配（相对路径），/ 表示从根节点开始匹配（绝对路径）。例如 //div 会匹配所有 div，而 /div 只匹配根元素下的直接 div。
Q: 如何处理带命名空间的 XML？
A: 对于带命名空间的 XML，XPath 查询需要绑定前缀。在 ToolYou 工具中，建议使用无命名空间的测试文档，或手动添加命名空间前缀。
Q: XPath 支持哪些浏览器？
A: 所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 XPath 查询。在 Chrome DevTools 中，可使用 $x('XPath表达式') 命令直接查询。
实战示例
示例 1：提取表格数据
假设有一个 HTML 表格，需要提取所有行中的数据：
//table/tr/td该表达式会选中表格中所有单元格的内容。
示例 2：查找特定类名的元素
提取所有 class 包含 "product" 的 div：
//div[contains(@class, 'product')]示例 3：获取链接和文本
提取页面中所有链接及其文本：
//a/@href
//a/text()示例 4：按条件筛选
查找类型为 text 且名称为 username 的输入框：
//input[@type='text' and @name='username']最佳实践建议
从简单开始：先测试基础表达式，再逐步添加条件
避免过于复杂：复杂 XPath 影响性能，尽量使用简洁表达式
注意命名空间：处理 XML 时留意命名空间前缀
使用调试工具：浏览器 DevTools 的 Console 可快速验证 XPath
测试边界情况：验证空结果、单结果、多结果的处理