【元素定位】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等定位元素

通過元素的屬性定位元素

通過父子關系定位元素

通過元素狀态定位元素

其他