XML教學 | XML 和 XPath

`Xpath`是什麼？

XPath即為XML路徑語言(XML Path Language)，它是一種用來確定XML檔中某部分位置的電腦語言。
XPath基於XML的樹狀結構，提供在資料結構樹中找尋節點的能力。
起初XPath的提出的初衷是將其作為一個通用的、介於XPointer與XSL間的語法模型。但是XPath很快的被開發者採用來當作小型查詢語言。

註：圖片截取於w3schools - XML and XPath

XPath是一種用於定義XML檔的各個部分位置的語法。
XPath使用路徑表達式在XML檔中導航。
XPath包含一個標準函數庫。
XPath是XSLT和XQuery中的主要元素。
XPath是W3C推薦的。

`XPath`路徑表達式

XPath使用路徑表達式來選擇XML文檔中的節點或節點集。這些路徑表達式看起來非常像在使用傳統計算機文件系統時看到的表達式。
XPath表達式可用於JavaScript、Java、XML Schema、PHP、Python、C和C++以及許多其他語言。

`XML XPath`範例

範例使用 w3schools - Books.xml

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<book category="cooking">
  <title lang="en">Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>

<book category="children">
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title>
  <author>James McGovern</author>
  <author>Per Bothner</author>
  <author>Kurt Cagle</author>
  <author>James Linn</author>
  <author>Vaidyanathan Nagarajan</author>
  <year>2003</year>
  <price>49.99</price>
</book>

<book category="web">
  <title lang="en">Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>

</bookstore>

這邊列出了一些簡單XPath表達式和表達式的結果：

XPath 表達式	結果
/bookstore/book[1]	選擇作為 bookstore 元素的子元素的第一個 book 元素
/bookstore/book[last()]	選擇作為 bookstore 元素的子元素的最後一個 book 元素
/bookstore/book[last()-1]	選擇作為 bookstore 元素的子元素倒數第二個 book 元素
/bookstore/book[position()<3]	選擇作為 bookstore 元素子元素的最前兩個 book 元素
//title[@lang]	選擇所有具有名為 lang 的屬性的標題元素
//title[@lang=’en’]	選擇所有具有值為“en”的“lang”屬性的標題元素
/bookstore/book[price>35.00]	選擇 bookstore 元素中 price 元素的值大於 35.00 的所有 book 元素
/bookstore/book[price>35.00]/title	選擇 bookstore 元素的 book 元素的所有 title 元素，其中 price 元素的值大於 35.00

`HTML XPath`範例

由於以上是一個XML檔的範例，如果要在瀏覽器內操作示範，會需要使用XMLHttpRequest…等等之類的；
但是沒有使用XPath做一些操作示範，感覺無法了解XPath到底是什麼？

於下方加碼，對HTML使用XPath去做搜尋的操作，並且能在瀏覽器上簡單動手做：

首先建立一個test.html並輸入下方HTML做儲存。
使用瀏覽器開啟test.html檔。
開啟「開發人員工具」，並選擇「Elements」。
按下Ctrl + F，開啟搜尋功能。
可以看到在輸入欄位內有提示Find by string, selector, or XPath，他是可以接受字串、選擇器或XPath。

輸入//*[@id="divone"]，就可以看到他將<div class='container' id='divone'>反黃。

<html>
  <body>
    <a>link</a>
    <div class='container' id='divone'>
      <p class='common' id='enclosedone'>Element One</p>
      <p class='common' id='enclosedtwo'>Element Two</p>
    </div>
  </body>
</html>