xpath定位方式

这篇博客详细介绍了XPath的定位方式,包括语法、绝对路径、相对路径、以及“/”与“//”的区别。此外,还讲解了如何利用元素的text属性、contains和starts-with关键字来构建有效XPath,并探讨了查找父节点和平级节点的方法。

一、xpath语法

语法://tag[@attibute=‘value’]

二、绝对路径

xpath绝对路径用单斜线“/”表示

三、相对路径

xpath 相对路径用双斜线“//”表示

四、“/”和“//”的区别

  1. “/”:元素是上一级节点的子节点中的一个,不能跳级
  2. “//”:下级任何子节点或者任何嵌套子节点中的一个,可以跳级
  3. 路径里不能用“*”,要写标签名

五、用元素的text文本属性

语法://a[text()=‘忘记密码’]
在这里插入图片描述

六、用contains关键字构建有效的xpath

语法://tag[contains(attribute,‘value’)]

七、用starts-with关键字构建有效的xpath

语法://tag[starts-with(attribute,‘value’)]
在这里插入图片描述

八、如何查找父节点和平级节点

父节点:xpath-to-some-element//parent::<标签名>
前面平级节点:xpath-to-some-element//preceding-sibing::<标签名>
后面平级节点:xpath-to-some-element//followinging-sibing::<标签名>

### Xpath 定位方式 `parent::div` 的用法详解 #### 1. **XPath 中的父轴定位** 在 XPath 中,`parent::` 是一种用于访问当前节点父节点的轴定位方式。然而,直接使用 `parent::div` 并不符合 XPath 的语法规则,因为 `parent::` 后面不需要指定具体的标签名称。实际上,`parent::node()` 才是合法的形式,它返回当前节点的父节点[^1]。 如果需要筛选特定类型的父节点(例如 `<div>`),可以通过结合谓词 `[self::div]` 来实现: ```xpath ..[self::div] ``` 这条表达式的含义是从当前节点跳转到其父节点,并验证该父节点是否为 `<div>` 类型。如果是,则匹配成功;否则失败。 --- #### 2. **示例:查找某个元素的 `<div>` 父节点** 假设有一个简单的 HTML 结构如下: ```html <div class="container"> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </div> ``` 如果我们想从 `<li>` 出发,找到它的 `<div>` 父节点,可以使用以下 XPath 表达式: ```xpath //li/../self::div ``` 解释: - `//li`:选择所有的 `<li>` 元素。 - `..`:回到 `<li>` 的父节点(这里是 `<ul>`)。 - `/self::div`:判断这个父节点是否为 `<div>`。如果不是,则不会被选中。 注意:由于这里的 `<ul>` 不是 `<div>`,所以此表达式不会返回任何结果。但如果我们将结构稍作修改,使 `<ul>` 成为 `<div>` 的直接子节点,则会正常工作。 --- #### 3. **另一种实现方式:通过祖先轴过滤** 除了使用 `parent::` 外,还可以利用 `ancestor::` 轴来寻找最近的 `<div>` 祖先节点。这种方式更加通用,尤其适用于复杂的嵌套层次结构。 继续以上述 HTML 为例,以下是对应的 XPath 表达式: ```xpath //li/ancestor::div[1] ``` 解释: - `//li`:选择所有的 `<li>` 元素。 - `/ancestor::div`:沿着祖先链向上遍历,直到遇到第一个 `<div>`。 - `[1]`:确保只取距离最近的那个 `<div>`。 这种方法的优点在于即使 `<div>` 不是直接父节点也能正确匹配。 --- #### 4. **JavaScript 实现对比** 尽管 XPath 提供了强大的路径表达能力,但在实际开发中有时也会借助 JavaScript 动态操作 DOM。例如,要找到某个元素的最近 `<div>` 父容器,可以用以下代码实现: ```javascript const liElement = document.querySelector('li'); const closestDiv = liElement.closest('div'); console.log(closestDiv); // 输出最近的 <div> 父节点 ``` 这段代码的作用与 XPath 的 `ancestor::div[1]` 类似,但它更适合运行时环境下的动态交互需求[^5]。 --- ### 总结 虽然 `parent::div` 并不是有效的 XPath 语法,但可以通过组合其他技术手段(如 `..[self::div]` 或 `ancestor::div[1]`)实现类似的定位效果。具体选择哪种方式取决于应用场景以及目标节点的具体位置关系。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值