xpath的基本使用,精准定位html中的元素

元素定位

基本语法

/ 从根节点开始选取 /html/div/span

// 从任意节点开始选取 //input

. 选取当前节点

.. 选取当前节点的父节点 //input/.. 会选取 input 的父节点

@ 选取属性或者根据属性选取 //input@data 选取具备 data 属性的 input 元素 //@data 选取所有 data 属性

* 通配符,表示任意节点或任意属性

标签名

寻找特定标签名的元素

复制代码
/div        从根节点获取div
//div       从任意节点获取div
/*          从根节点获取任意元素

属性名

寻找带有特定属性的元素,@符号代表要对属性值进行操作了

复制代码
//div[@class="c1"]        class为c1的div元素
//*[@class="c1"]          class为c1的任意元素

层级

寻找特定层级的元素

复制代码
//div[@class="c1"]/p        class为c1的div元素下的p元素
//*[@class="c1"]/span[@class="c2"]          class为c1的任意元素下的class为c2的span元素

次序

寻找指定排名的元素

复制代码
//div[@class="c1"]/p[1]        class为c1的div元素下的第一个p元素
//*[@class="c1"]/span[@class="c2"][2]          class为c1的任意元素下的第二个class为c2的span元素

元素筛选

逻辑表达式

|为逻辑或表达式,表示二者满足其一便可用于链接两个完整的xpath表达式,注意是完整的。

复制代码
//div[@class="c1"]/p[1]|//*[@class="c1"]/span[@class="c2"][2]

and,or,not是在方括号内用的

复制代码
//div[@class="c1" or @class="c2"]

判断语句

起始方括号内的语句就是判断语句

复制代码
/items/item[position() >= 2 and position() <= 5]        寻找/items/item,只匹配其中的第二到第五个

a[text()='Login']             可以匹配文本为"Login"的所有 <a> 元素。

函数的使用

text

获取节点中所有的字符组成字符串

html 复制代码
<book>  
    <title>Learning XPath</title>  
</book>

/book/title/text()

结果:
Learning XPath

concat()

concat() 函数用于将两个或多个字符串值连接成一个字符串。

html 复制代码
<book>  
    <title>Learning XPath</title>  
</book>

concat('The book title is: ', /book/title/text())

结果:The book title is: Learning XPath

substring()

substring() 函数用于从一个字符串中提取子字符串。

html 复制代码
<book>  
    <title>XPath for Dummies</title>  
</book>

substring(/book/title/text(), 1, 4)

contains()

html 复制代码
<book>  
    <title>XPath Fundamentals</title>  
</book>

contains(/book/title/text(), 'Path')

true

starts-with()

starts-with() 函数检查一个字符串是否以指定的前缀开始。

html 复制代码
<book>  
    <title>XPath Basics</title>  
</book>

starts-with(/book/title/text(), 'XPath')

true

number()

number() 函数将字符串转换为数字。

html 复制代码
<book>  
    <price>29.99</price>  
</book>

number(/book/price/text())

29.99

sum()

sum() 函数用于计算节点集中所有节点的数值之和。

html 复制代码
<books>  
    <book>  
        <price>19.99</price>  
    </book>  
    <book>  
        <price>24.99</price>  
    </book>  
</books>

sum(/books/book/price/text())

44.98

温馨提示

xpath在定位网页元素和获取内容时很有用,它的特性用在爬虫上非常好用,下一篇文章是在python的lxml库中使用xpath。

相关推荐
github_is_geeksKai28 分钟前
浏览器端文件处理的边界:PDF 面单、GPX 隐私与 EPUB 修复
前端
deli0071 小时前
从一句反馈到一次升级:Mystudy 的自进化实践
前端
FungLeo2 小时前
成为全栈·Vue 管理后台篇·用 fetch 建一层可控的请求内核
前端·javascript·vue.js·http·fetch·formdata·接口封装
FungLeo4 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo4 小时前
成为全栈·Vue 管理后台篇·分页只显示第一页:从接口total 定位到前端修复
前端·vue.js·状态模式·分页·naive ui·服务端分页·前端问题排查
ZhengEnCi4 小时前
苹果滑动为什么有「肉感」:橡皮筋越界阻尼与弹簧动画的物理原理
前端
Moment4 小时前
不会后期的我,发现了一个开源胶片神器😍😍😍
前端·后端·开源
L1mbo4 小时前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序
FungLeo5 小时前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片:组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
程序员大阳5 小时前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名