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

CSS选择器

CSS教程

• 操作
  • 定位CSS选择器
    1. 开发者调试模式进入Elements
    2. 找到需要定位的元素，右键Copy–>Copy selector
  • 检查CSS选择器准确性操作
    1. 开发者调试模式进入Console
    2. 输入$(“selector”) –> 列出与selector匹配的所有元素
    3. 输入$$(“selector”) –> 把这些匹配到的元素组成了数组
• 通过id,class等定位元素
  
• 通过元素之间的嵌套定位元素
  
• 通过元素的属性定位元素
  
• 通过父子关系定位元素
  
• 通过元素状态定位元素
  
• 其他
  

XPATH选择器

XPath教程

• 定义
  XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。
  获取Xpath进行元素定位
• XML概述
  • XML 指可扩展标记语言（EXtensible Markup Language）
  • XML 是一种标记语言，很类似 HTML
  • XML 的设计宗旨是传输数据，焦点是数据的内容（HTML是显示数据）
  • XML 的标签需要我们自行定义。
  • XML 被设计为具有自我描述性。
  • XML 是 W3C 的推荐标准
• 操作
  • 定位操作
    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运算符
  +
  –
  *
  div
  =
  !=
  <
  <=
  >
  >=
  or
  and
  mod