XPath表达式解析与应用

本篇内容来自AI的解读，用于后续温习回顾xpath的使用

$x("//div[@class='ec-accordion' and (./div[@class='ec-accordion-title' and ./span[text()='Prerequisites']])]")

各部分含义：
(1) //div - 选择文档中所有层级的<div>元素
(2) [@class='ec-accordion'] - 筛选class属性为"ec-accordion"的div
(3) and (...) - 并且满足括号内的条件
(4) ./div[@class='ec-accordion-title'] - 该div下必须有一个子div，且class为"ec-accordion-title"
(5) ./span[text()='Prerequisites'] - 该子div下必须有一个span元素，其文本内容为"Prerequisites"

该XPath会匹配类似这样的HTML结构
<div class="ec-accordion">
<div class="ec-accordion-title">
<span>Prerequisites</span>
</div>
<!-- 其他内容 -->
</div>

 

$x("//p[@class='right-second-section-ecommerce-bold-buttom-text-section' and normalize-space(text())='Payment methods']/ancestor::div[@class='right-second-section-ecommerce-each-text-section-row']")

各部分含义：

(1)//p[@class='right-second-section-ecommerce-bold-buttom-text-section']
查找所有class为"right-second-section-ecommerce-bold-buttom-text-section"的<p>段落元素
(2)normalize-space(text())='Payment methods'
筛选文本内容（去除首尾空格后）为"Payment methods"的元素
normalize-space()函数会移除文本前后的空白字符，并将中间连续空格转为单个空格
(3)/ancestor::div[@class='right-second-section-ecommerce-each-text-section-row']
向上查找所有祖先节点中class为"right-second-section-ecommerce-each-text-section-row"的<div>元素

该XPath会匹配类似这样的HTML结构
<div class="right-second-section-ecommerce-each-text-section-row">
<!-- 可能还有其他子元素 -->
<p class="right-second-section-ecommerce-bold-buttom-text-section">
Payment methods
</p>
<!-- 可能还有其他子元素 -->
</div>

 

$x("//p[@class='right-second-section-ecommerce-bold-buttom-text-section' and contains(text(),'License Type')]/span")

各部分含义：

(1)//p[@class='right-second-section-ecommerce-bold-buttom-text-section']
查找所有class为"right-second-section-ecommerce-bold-buttom-text-section"的<p>段落元素
(2)contains(text(),'License Type')  筛选文本内容中包含"License Type"字符串的元素
contains()函数是部分匹配，不要求完全匹配
(3)/span   选择这些段落元素下的直接子元素<span>

该XPath会匹配类似这样的HTML结构
<p class="right-second-section-ecommerce-bold-buttom-text-section">
其他文本 License Type 其他文本
<span>这是要查找的span元素</span>
可能还有其他内容
</p>
或者
<p class="right-second-section-ecommerce-bold-buttom-text-section">
License Type:
<span>专业版</span>
</p>

 

$x("//div[@class='disw-cart-subtotal']//div[@class='disw-cart-tax']/following-sibling::div")

各部分含义：
(1)//div[@class='disw-cart-subtotal']
查找所有class为"disw-cart-subtotal"的div元素（小计区域）
(2)//div[@class='disw-cart-tax']
在小计区域的后代中查找class为"disw-cart-tax"的div元素（税费信息）
(3)/following-sibling::div
选择该税费元素之后的所有同级div元素

该XPath会匹配类似这样的HTML结构
<div class="disw-cart-subtotal">
<div class="disw-cart-item">商品小计: $100</div>
<div class="disw-cart-tax">税费: $10</div>
<div class="disw-cart-discount">折扣: -$5</div> <!-- 这个会被选中 -->
<div class="disw-cart-total">总计: $105</div> <!-- 这个会被选中 -->
<div class="disw-cart-shipping">运费: $8</div> <!-- 这个会被选中 -->
</div>

following-sibling::div 之后的所有同级div， 向后
preceding-sibling::div 之前的所有同级div， 向前
following::div 之后的所有div（不限层级）， 文档顺序向后

其他相关表达式

//div 从文档根节点开始，在整个文档中查找所有div， 全局查找
.//div 从当前节点开始，在当前节点的后代中查找所有div， 局部查找

./：当前节点的直接子元素
../：当前节点的父元素
../../：当前节点的祖父元素

div:nth-of-type(2) 父元素下第2个div ，选择第2个div
div:nth-child(2) 父元素下第2个子元素（必须是div）， 如果第2个子元素不是div，则不匹配
div:first-of-type 父元素下第一个div ，选择第一个div
div:last-of-type 父元素下最后一个div ，选择最后一个div

<section>
<h1>标题</h1>
<div>第一个div</div> <!-- div:nth-of-type(1) -->
<p>段落</p>
<div>第二个div</div> <!-- div:nth-of-type(2) -->
<div>第三个div</div> <!-- div:nth-of-type(3) -->
</section>