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

XML
この記事は約7分で読めます。

はじめに

 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">DOM1</div>
      <div class="dom2">DOM2</div>
      <ul class="ulClass">
         <li class="dom3">DOMとは?</li>
         <li class="dom4">DOMのノード</li>
         <li class="dom5">DOMの要素</li>
      </ul>
    </section>
  </body>
</html>

タグ指定による場合

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

絶対パス指定 : /HTMLタグ1/HTMLタグ2・・・/HTMLタグn
相対パス指定 : //HTMLタグ1/HTMLタグ2・・・/HTMLタグn

 具体的な例として、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の演算子と関数にはどのようなものがあるの?などについて解説してきました。

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

以上です。

コメント

タイトルとURLをコピーしました