XPath入門、取得、書き方、関数なども解説

目　次

はじめに
XPathとは？
XPathの取得
　XPathの書き方
XPathの演算子と関数
おわりに

はじめに

　JavaScript入門講座の第十八弾として、XPath入門、取得、書き方、関数などについて紹介します。

　この記事を読むと次の疑問について知ることができます。

XPathとは？
XPathの取得はどうするの？
XPathの書き方はどのように書くの？
- タグ指定による場合
- 属性指定による場合
- テキストで指定する場合
XPathの演算子と関数にはどのようなものがあるの？

　JavaScript入門講座（17）では、Cookie 入門、Cookieとは？、設定、危険性、js-cookieなどについて解説してきました。

　ここでは、XPath入門、取得、書き方、関数などについて深堀していきます。

XPathとは？

　XPathは、XML Path Language の頭文字をとった略語で、XML文書から特定の要素を取り出すための簡単な記述言語です。

　HTML文書に対応しており、したがって、JavaScriptでも利用が可能です。

XPathは、W3C (World Wide Web Consortium) で開発され、1999年11月に勧告されました。

　この時にXPathは1.0でしたが、2007年1月にXPath2.0、2014年4月に XPath 3.0、2017年3月に XPath 3.1 が勧告され、XPath 3.1が現在での最新バージョンのようです。

　XPathは、XML、HTML文書をノードのツリー構造としてモデル化して表現した際に、ある特定の位置などを記述できる言語です。

　この際のノードには、次のような種類があります。

ノードの種類	意味
ルートノード	ツリーの一番上にある「/」ノード
要素ノード	XML、HTML要素を表すノード
属性ノード	要素内で指定された属性を表すノード
テキストノード	開始タグと終了タグで挟まれた文字列データ
コメントノード	コメントをを表すノード
処理命令ノード	処理命令を表すノード
名前空間ノード	要素に一意の異なる名前をつけなければ識別できないような名前のノード

XPathの取得

　XPathを取得するには、Chromeブラウザを利用していれば、取りたいXPathのページを表示させて、デベロッパーツールを（F12、表示させたページで右クリくしてでるメニューで「検証」をクリック)呼び出し、調べたい要素をクリックして、右の「Elements」に選んだ要素を表示させ（青く表示）、その部分で右クリックして、「Copy」⇒「copy XPath」をクリックすることにより、その要素のXPathを取得することができます。

　XPathの書き方

先ず、次のようなHTML文書があったとしましょう。

<html>
  <body>
    <h1>JavaScript入門</h1>
    <section>
      <h2>DOMについて</h2>
      <div id="dom1">DOM１</div>
      <div class="dom2">DOM２</div>
      <ul class="ulClass">
         <li class="dom3">DOMとは？</li>
         <li class="dom4">DOMのノード</li>
         <li class="dom5">DOMの要素</li>
      </ul>
    </section>
  </body>
</html>

タグ指定による場合

　タグ指定での一般的な書き方は次のようになります。

絶対パス指定　：　/HTMLタグ１/HTMLタグ２・・・/HTMLタグｎ
相対パス指定　：　//HTMLタグ１/HTMLタグ２・・・/HTMLタグｎ

　具体的な例として、h2タグの「DOMについて」を指定する場合のXPathの書き方は次のようになります。

/html/body/section/h2

　「sectionタグ」から見た場合は、相対パスで「/html/body/section/」を「//」に置き換えて指定することができます。

//h2

　また、「DOMのノード」を指定したい場合は、相対パス指定ですると、次のよういなります。

//ul/li[2]

つまり、「ul」リストの2番目ということを指しています。

属性指定による場合

　HTMLのid名を持つ場合の書き方は次のようになります。

//タグ名[@属性名="属性値"]

　具体例として、ulタグ内のclass名が"dom4"DOMのノードをXPathで指定する場合は次のようになります。

//ul/li[@class="dom4"]

テキストで指定する場合

HTMLのタグで挟まれたテキストを指定する場合の書き方は次のようになります。

//タグ名[text()="テキスト"]

　具体例として、ulタグ内のclass名が"dom5"の「DOMの要素」をXPathで指定する場合は次のようになります。

//ul/li[text()="DOMの要素"]

XPathの演算子と関数

　XPathで利用できる演算子を次に挙げます。

演算子	意味	演算子	意味
`\|`	ノード集合の和集合	`mod`	剰余
`and`	論理積	`=`	等価
`or`	論理和	`!=`	等価でない
`+`	足し算	`<`	小なり
`-`	引き算	`<=`	小なりまたは等価
*``**	掛け算	`>=`	大なりまたは等価
`div`	割り算	`>`	大なり

　そして、主要な関数について、次に挙げときます。

関数	意味
`数値 last()`	式評価コンテキストのコンテキストサイズに等しい数値を返します。
`数値 position()`	式評価コンテキストのコンテキスト位置に等しい数値を返します。
`数値 count(node-set)`	ノード集合に含まれるノードの数を数え、その整数を返します。
`文字列 local-name( [node-set] )`	与えられたノード集合内の最初のノードのローカル名 (local name) を表す文字列を返します。
`文字列 namespace-uri( [node-set])`	指定されたノード集合内の最初のノードの名前空間 URI を表す文字列を返します。
`文字列 name([node-set])`	与えられたノード集合内の最初のノードの QName を表す文字列を返します。
`文字列 string( [object] )`	文字列に変換します。
`ブーリアン start-with(文字列,文字列)`	第 1 引数の文字列が第 2 引数の文字列で始まるかどうかを調べ、true または false を返します。
`ブーリアン contains(文字列,文字列)`	第 1 引数の文字列に第 2 引数の文字列が含まれているかどうかを判定し、真偽値 true または false を返します。
`文字列 substring(文字列,数値,数値)`	与えられた文字列の一部を返します。
`数値 string-length(文字列)`	与えられた文字列の文字数に等しい数値を返します。
`文字列 normalize-space(文字列)`	文字列から前後のホワイトスペースを取り除き、連続するホワイトスペースを 1 つのスペースに置き換え、その結果として得られる文字列を返します。
`ブーリアン boolean(式)`	式を評価し、 true または false を返します。
`ブーリアン not(式)`	式を真偽値として評価し、その逆の値を返します。
`ブーリアン true()`	true の論理値を返します。
`ブーリアン false()`	false の論理値を返します。
`数値 number(オブジェクト)`	オブジェクトを数値に変換し、その数値を返します。
`数値 sum(ノード集合)`	与えられたノード集合内のそれぞれのノードの数値としての値を合計した数値を返します。
`数値 floor(数値)`	小数を評価し、その小数以下の最も大きい整数を返します。
`数値 round(数値)`	与えられた数値に最も近い整数を返します。

　いろいろな関数の中で、1つだけ使用例を紹介します。

　//li[contains(@class,“DOM”)]

　とすると、liリスト内の文字で「DOM」が含まれる要素を取得できます。

おわりに

　何だったでしょうか？

　XPathとは？、XPathの取得はどうするの？、XPathの書き方はどのように書くの？、タグ指定による場合、属性指定による場合、テキストで指定する場合、XPathの演算子と関数にはどのようなものがあるの？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。