XPath是一種能夠快速在HTML文檔中選擇並抽取元素、屬性和文本的方法。html
在Chrome,打開開發者工具,能夠使用$x工具函數來使用XPath來選擇元素,好比選中全部的超連接。node
XPath經過"路徑表達式"(Path Expression)來選擇節點。函數
在形式上,"路徑表達式"與傳統的文件系統很是相似。工具
好比咱們依次得到Html節點(即最根節點)、Html下的Body節點、Html下的Body下的全部Div節點。post
單斜槓與雙斜槓: 學習
在這裏咱們使用了單斜槓(/)做爲最開始的元素,表示從根節點選取。若是我不想每次都從HTML元素出發,想直接取到Body元素,能夠使用雙斜槓(//),它表示直接命中待選擇元素,而不考慮位置,如//body能夠直接取到Body元素。htm
獲取到節點的屬性,能夠使用@符號blog
[例1]開發
//h1/a/@id :獲取全部h1元素直接子元素a的id屬性。文檔
獲取節點的文本,使用text()函數
[例1]
//h1/a/text():獲取全部h1元素直接子元素a的文本內容。
咱們以一個簡易的類HTML文檔,來進行實例分析。
<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>
[例1]
bookstore :選取 bookstore 元素的全部子節點。
[例2]
/bookstore :選取根節點bookstore,這是絕對路徑寫法。
[例3]
bookstore/book :選取全部屬於 bookstore 的子元素的 book元素,這是相對路徑寫法。
[例4]
//book :選擇全部 book 子元素,而無論它們在文檔中的位置。
[例5]
bookstore//book :選擇全部屬於 bookstore 元素的後代的 book 元素,而無論它們位於 bookstore 之下的什麼位置。
[例6]
//@lang :選取全部名爲 lang 的屬性。
謂語用來在查詢的時候設置條件,來達到篩選的效果。
[例1]
//div[@class] :選擇文檔中的全部擁有class屬性的div節點。
[例2]
//div[@class='postTitle']:選擇文檔中的全部擁有class屬性且值爲postTitle的div節點。
[例1]
//div[a] :選擇文檔中的全部擁有a子元素的div節點。
"*"表示匹配任何元素節點。"@*"表示匹配任何屬性值。node()表示匹配任何類型的節點。
[例1]
//* :選擇文檔中的全部元素節點。
[例2]
/*/* :表示選擇全部第二層的元素節點。
[例3]
/HTML/* :表示選擇HTML的全部元素子節點。
[例4]
//title[@*] :表示選擇全部帶有屬性的title元素。
[例5]
//book/title | //book/price :表示同時選擇book元素的title子元素和price子元素。