元素的Xpath仅基于文本内容？
问题描述 投票：0回答：1
我正在尝试获取此 HMTL 代码的第二个按钮“购买”的 xpath，但不使用类、id 或其他属性或完整的 Xpath，仅使用与其相关的文本内容，如 此示例 中所示。该代码在“div”内有 2 个“ul”元素。每个“ul”有3或4个“li”。我想要这样，因为内部属性改变了，但结构和文本内容保持不变。
我的目标是拥有第二个“Buy”的Xpath，这是与包含文本“Home”的“li”相关的Xpath。
到目前为止，我在 Chrome 控制台中的尝试如下所示，但不起作用：
$x("//*[text()='Home']")
$x("//ul[text()='Home']")
$x("//*[text()='Home']/following-sibling::li")
在下图中我展示了它。
div {
background-color:#eeeeee;
display:inline;
}
#ul li {
display: grid;
column-count: 4;
column-gap: 20px;
display: inline;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<ul>
<li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
Electronics
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----><!----></div>
</div>
</div></li>
<li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Cameras
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----></div>
</div>
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
4K Front
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----><div class="xyzq-list-column column-unshrink button-column ">
<div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
</div>
</div>
</div>
</div>
</div></li>
</ul>
<ul>
<li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
Home
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----><!----></div>
</div>
</div></li>
<li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Appliances
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----></div>
</div>
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
Fans
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<!----><div class="xyzq-list-column column-unshrink button-column ">
<div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
</div>
</div>
</div>
</div>
</div></li>
<li data-dqa-li="" data-components="xyzq-li" id="daw53" class="daw-view"><button data-dqa-button="list" tabindex="0" data-components="xyzq-li-button-row" id="daw54" class="daw-view"><div class="xyzq-list-item ">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Discount Code
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<div class="xyzq-list-column column-unshrink icon-drilldown " title="Select" data-dqa-img="drilldown"/>
<!----></div>
</div>
</div>
</button></li>
</ul>
</div>
</body>
</html>1个回答
0
投票
投票
要通过文本匹配元素，可以使用
contains()A
following-siblingbutton//li[contains(., "Home")]/following-sibling::li//button[contains(., "Buy")]
document.getElementById('find').addEventListener('click', () => {
const xpath = '//li[contains(., "Home")]/following-sibling::li//button[contains(., "Buy")]';
const buy = document.evaluate(xpath, document, null,
XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
buy.style.background = 'green';
});div {
background-color: #eeeeee;
display: inline;
}
#ul li {
display: grid;
column-count: 4;
column-gap: 20px;
display: inline;
}
#find {
font-weight: bold;
}<div>
<ul>
<li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view">
<div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
Electronics
</div>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
</div>
</li>
<li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view">
<div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view">
<div class="xyzq-list-column flex-width fixed-width">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Cameras
</div>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>
<!---->
</div>
</div>
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
4K Front
</div>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>
<!---->
<div class="xyzq-list-column column-unshrink button-column ">
<div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view">
<div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
Home
</div>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>
<!---->
<!---->
</div>
</div>
</div>
</li>
<li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view">
<div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view">
<div class="xyzq-list-column flex-width fixed-width">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Appliances
</div>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>
<!---->
</div>
</div>
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
Fans
</div>
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>
<!---->
<div class="xyzq-list-column column-unshrink button-column ">
<div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
</div>
</div>
</div>
</div>
</div>
</li>
<li data-dqa-li="" data-components="xyzq-li" id="daw53" class="daw-view"><button data-dqa-button="list" tabindex="0" data-components="xyzq-li-button-row" id="daw54" class="daw-view"><div class="xyzq-list-item ">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item">
<div class="xyzq-list-column flex-width ">
<div class="xyzq-list-item inner-list-item " style="">
<div class="xyzq-list-column flex-width column-unshrink ">
<div class="xyzq-list-item">
<div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
Discount Code
</div>
</div>
<!----><!----><!----><!----></div>
</div>
</div>
<div class="xyzq-list-column column-unshrink icon-drilldown " title="Select" data-dqa-img="drilldown"/>
<!----></div>
</div>
</div>
</button></li>
</ul>
</div>
<button id="find">FIND A BUTTON</button>最新问题
- Raspberry Pi Pico W 上的 MicroPython v1.22.2 出现 RP2040 MBEDTLS_ERR_SSL_CONN_EOF 错误
- 更新 Catalyst 数据存储表中的数据已达到 API 限制
- Redis MGET 性能
- 解压 - 警告和地图名称
- Spring Cloud DataFlow - SpringBoot3 不显示执行统计信息
- Safari 浏览器在版本 17.2.1 中显示背景视频的播放按钮
- 如何仅在系统 pip/python 支持时有条件地应用`--break-system-packages`？
- remix动态路由名称除以“-”有什么解决办法吗？
- 如何提示用户从 PrimeNG menuItem 中以角度上传文件
- 有条件地包装 vue 3 元素
- 如何正确检查进程是否正在运行并停止它
- Spring Boot @Async 方法的异常处理
- dplyr 中各组之间的差异
- 根据 2 行删除重复项并指定每列要执行的操作
- 插页式广告未呈现
- 配置 Spring Cloud Dataflow 流的 Kubernetes 服务
- Spring Jpa findById 导致 StackOverflowError 但其他查询没有问题
- 用于多边形描边的 LinearGradientBrush 不起作用
- 根据 CASE WHEN 条件确定优先级/排名
- 使用jinja模板在html中显示两个python列表作为网页中的两列
© www.soinside.com 2019 - 2024. All rights reserved.