【元素定位】XPath选择器&CSS选择器

文章目录

• XPATH选择器
• • 定义
  • XML概述
  • XML特点
  • 操作
  • XPath节点Node关系
  • XPath语法
  • 常用路径表达式
  • 谓语
  • 选取未知节点
  • • 通配符
    • 选取若干路径
    • Xpath轴Axes（获取当前节点的父节点、兄弟节点...）
    • 其他
  • XPath运算符
• CSS选择器
• • 操作
  • 元素定位
  • • 通过id,class等定位元素
    • 通过元素的属性定位元素
    • 通过父子关系定位元素
    • 通过元素状态定位元素
    • 其他

XPATH选择器

XPath教程

定义

XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。

获取Xpath进行元素定位

XML概述

• XML 指可扩展标记语言（EXtensible Markup Language）
• XML 是一种标记语言，很类似 HTML
• XML 的设计宗旨是传输数据，焦点是数据的内容（HTML是显示数据）
• XML 的标签需要我们自行定义。
• XML 被设计为具有自我描述性。
• XML 是 W3C 的推荐标准

XML特点

• 可以自定义标签
• 必须包含根元素
• 大小写敏感
• 属性值须加引号
• 标签可以自由命名
• 标签成对出现
• 标签可以重名

操作

• 定位操作
  1. 开发者调试模式进入Elements
  2. 找到需要定位的元素，右键Copy–>Copy Xpath
• 检查XPath准确性操作
  1. 开发者调试模式进入Console
  2. 输入$x(“XPath路径”)

XPath节点Node关系

• 父（Parent）
• 子（Children）
• 同胞（Sibling）
• 先辈（Ancestor）
• 后代（Descendant）

XPath语法

XPath使用路径表达式来选取 XML文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。

• 实例文档

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book>
  <title lang="eng">Harry Potter</title>
  <price>29.99</price>
</book>

<book>
  <title lang="eng">Learning XML</title>
  <price>39.95</price>
</book>

</bookstore>
           

常用路径表达式

类似Linux的文件操作

建议使用相对路径配合属性进行定位；因为绝对路径定位，如果更改了其中一个节点，无法再使用

注意：索引以1开始

谓语

谓语用来查找某个特定的节点或者包含某个指定的值的节点。谓语被嵌在方括号中

选取未知节点

通配符

选取若干路径

使用“|”运算符 --> 相当于或的关系

Xpath轴Axes（获取当前节点的父节点、兄弟节点…）

[外链图片转存中…(img-o9wfXNY1-1622890065378)]

• …/表示当前节点的父节点
• following-sibling::div[1/N] 表示当前节点其后的兄弟节点中的 第 1/N 个 div标签

其他

XPath运算符

+ - * div

= !=

< <= > >=

or and mod

CSS选择器

CSS教程

操作

• 定位CSS选择器
  1. 开发者调试模式进入Elements
  2. 找到需要定位的元素，右键Copy–>Copy selector
• 检查CSS选择器准确性操作
  1. 开发者调试模式进入Console
  2. 输入$(“selector”) --> 列出与selector匹配的所有元素
  3. 输入$$(“selector”) --> 把这些匹配到的元素组成了数组

元素定位

通过id,class等定位元素

通过元素的属性定位元素

通过父子关系定位元素

通过元素状态定位元素

其他