浏览器下Xpath实用技巧

简介: 浏览器下Xpath实用技巧
在浏览器环境下,一些强大的xpath标准方法没有被支持(如正则匹配方法matches()),只能利用有限的方法做抽取,下面是列出我常用的一些查找技巧、经验;不定时更新。

常用

以下面的分页组件节点结构为例:

<div class="pageList">
    <span data-span style="display:none">.</span>
    <span class="disabled">‹</span>
    <span class="current" data-span>1</span>
    <a href="" style="display:none"></a>
    <a href="/Program/n-d-2-a-2">2</a>
    <a href="/Program/n-d-2-a-3">3</a>
    <a href="/Program/n-d-2-a-4">4</a>
    <a href="/Program/n-d-2-a-5">5</a>
    <a href="/Program/n-d-2-a-2">›</a>
    <a href="/Program/n-d-2-a-30" class="last">... 30</a>
</div>
<div class="ad">
    <a href='xxx'></a>
    <a href="xxx"><img src="xxx" /></a>
</div>

"或"条件

选取"上一页"、"下一页"节点:

//div[@class="pageList"]/span[@class="current" and @data-span]

"与"条件

选取"上一页"、"下一页"节点:

//div[@class="pageList"]/*[text()="‹" or text()="›" ]

"非"条件

选取不含href属性的a节点:

//div[@class="pageList"]/a[not(@href)]

包含

选取href属性包含‘Program’的a节点:

//div[@class="pageList"]/a[contains(@href,'Program')]

选取href属性不包含‘Program’的a节点:

//div[@class="pageList"]/a[not(contains(@href,'Program'))]

判断是否数字

选取文本是数字的a节点:

//div[@class="pageList"]/a[string(number(text())) != 'NaN'];

父节点

选取ad中的包含img的a节点:

//div[@class="ad"]/a/img/parent::a

相邻兄弟节点

选取第4页a节点前面的第一个相邻节点(即第3页a节点):

//div[@class="pageList"]/a[text()="4"]/preceding-sibling::a[1]

选取第4页a节点后面的第一个相邻节点(即第5页a节点):

//div[@class="pageList"]/a[text()="4"]/following-sibling::a[1]

以特定字符开头或结尾

选取href属性以“/Program”开头的a节点(结尾使用的方法是ends-with):

//div[@class="pageList"]/a[starts-with(@href,"/Program")]

上下文

选取前三个a:

//div[@class="pageList"]/a[position()<=3]

选取最后一个a:

//div[@class="pageList"]/a[last()]

js 实现Xpath方法

function getElementsByXpath(xpathToExecute, element) {
        element = (element === undefined)? document:element;
        var result = [];
        var nodesSnapshot = document.evaluate(xpathToExecute, element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
        for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
            result.push(nodesSnapshot.snapshotItem(i));
        }
        return result;
}

//调用示例
getElementsByXpath('//div')
getElementsByXpath('//div', document.body)

下面是标准轴和运算符,方便查看,这部分内容原文来自http://www.runoob.com/xpath/xpath-tutorial.html

XPath 运算符

XPath 表达式可返回节点集、字符串、逻辑值以及数字。
image.png

Xpath 轴

image.png

相关文章
|
24天前
自动生成IE浏览器的xpath工具IEXPath
自动生成IE浏览器的xpath工具IEXPath
25 0
|
Web App开发 JavaScript 开发者
Python+selenium 自动化-chrome页面静止、冻结技术,获取web动态页面的Xpath方法,查看浏览器动态dom节点
Python+selenium 自动化-chrome页面静止、冻结技术,获取web动态页面的Xpath方法,查看浏览器动态dom节点
527 0
Python+selenium 自动化-chrome页面静止、冻结技术,获取web动态页面的Xpath方法,查看浏览器动态dom节点
|
Web App开发 Python 数据采集
一个浏览器插件,测试xpath的工具
相信大家有一个感觉,就是每当写爬虫时,需要写xpath来找到我们要的数据,调试xpath会浪费很多时间,一次又一次的requests请求,每每看到取到的元素与自己心中想要的元素不符时.......... 今天为大家介绍一款谷歌浏览器插件,能帮大家在待抓取页面直接写xpath并且可以看到取到的元素,话不多说 上图: 打开Chrome商店,搜索 xpath-helper 会出现如图中的搜索结果,点击添加至CHROME按钮,根据提示完成添加即可。
1732 0
|
6天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
3天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
366 1
|
23天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
63 0
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28

热门文章

最新文章

相关实验场景

更多