IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き）

JavaScript XPath

JavaScript-XPath とは

JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。
一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。

以下が公式サイトになります。

http://coderepos.org/share/wiki/JavaScript-XPath

DOM 3 XPath ってなんなの！？

めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。
JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？
DOM 3 XPath はそれのパワーアップ版の関数 document.evaluate のことです！
わーわー！
どのくらいパワーアップしてるかというと。。。

  • document.getElementById では id 属性でしか取得できないけど document.evaluate はどんな属性の値からも要素を取得できます！
  • document.getElementsByTagName では要素の名前（タグの名前）でしか取得できなかったけど、 tag が 't' から始まるやつ！とか div か p ！とかできます！
  • 他にも、 type 属性が text の input 要素を含んでいる form 要素を取得！とかもできます！

すごいでしょ？
でも、この便利な関数って一部のブラウザでしか使えないのです。。そこで、 JavaScript-XPath を使うとすべてのブラウザで DOM 3 XPath が使えるようになるんです。

じゃあ、 document.evaluate には何を渡せばいいの？

ここで、 XPath の登場です！
( ﾟ∀ﾟ)o彡゜XPath！XPath！
document.evaluate は以下のように使います！

var result = document.evaluate(
               '//div',            // これが XPath !
               document,           // どこから取得するか たとえば、 document.body とかってすると head 以下の要素は取得されない
               null,               // 基本使わないと思っていい
               7,                  // 結果の種類を指定する。基本は 6 か 7 でいい。 6 だったら結果がソートされない可能性がある。
               null                // 基本使わない
             );

result.snapshotLength;  // 取得した要素（正確にはノード）の数。
result.snapshotItem(0); // 1 個目の要素
result.snapshotItem(1); // 2 個目の要素

ね？簡単でしょ？

XPath 覚えなきゃいけねーじゃねーか！

うん＞＜でも、 XPath って超簡単だよ！
超基本的なチートシートだよ。

全要素 //* /descendant::*
全 div 要素 //div /descendant::div
class 属性が "hoge" な div 要素 //div[@class="hoge"] /descendant::div[@class="hoge"]
id 属性が "hoge" な要素 id("hoge") //*[@id="hoge"] /descendant::*[@id="hoge"]
title 属性が "hoge" で class 属性が "fuga" でない要素 //*[@title="hoge" and @class!="fuga"] /descendant::*[@title="hoge" and @class!="fuga"]
form 要素の 3 番目の input 要素 //form/descendant::input[3] /descendant::form/descendant::input[3] *1
チェックされたチェックボックスの親要素 //input[@checked="checked"]/.. //input[@checked="checked"]/parent::node()

JavaScript-XPath って使うの結構めんどいんでしょ？

違うよ！ぜんぜん違うよ！
超簡単だよ＞＜
という訳で、 JavaScript-XPath を使う為の 3 ステップを教えちゃいます。

1. 最新の JavaScript-XPath をダウンロードしてくる

ここからダウンロードしてね。
http://svn.coderepos.org/share/lang/javascript/javascript-xpath/trunk/release/javascript-xpath-latest.js

2. 以下のように HTML ファイルにインポートする
<!-- こんな感じで javascript-xpath-***.js を読み込む -->
<script src="javascript-xpath-latest.js"></script>

<!-- ダウンロードがめんどくて、とりあえず使ってみるだけだったら直接参照してみる＞＜（本番環境ではしないでね＞＜）
<script src="http://svn.coderepos.org/share/lang/javascript/javascript-xpath/trunk/release/javascript-xpath-latest.js"></script>
-->
3. そして、 DOM 3 XPath を使う！
window.onload = function() {
  // div 要素全部取ってくる
  var r = document.evaluate('//div', document, null, 7, null); // この '//div' が XPath。これ、まめ知識ね。

  // div 要素の数
  alert(r.snapshotLength); 

  // 最初の div 要素
  alert(r.snapshotItem(0));

  // 2 番目の div 要素
  alert(r.snapshotItem(1));
};
ほら、できちゃったでしょ？

わいわいがやがや

まとめ

ぜひぜひ、 JavaScript-XPath を使ってください！
この冬も XPath が熱い！

[余談] でも、 JavaScript-XPath にもバグとかあるんじゃないの？

JavaScript-XPath ではある程度のテストはしており、基本的にはバグは少ないと思います。
でも、人が作るものなので、少しのバグはあると思います＞＜

ですので、あなたの力を貸してください！！

JavaScript-XPath では以下のようなテストを行っています

http://svn.coderepos.org/share/lang/javascript/javascript-xpath/trunk/test/functional/index.html

JavaScript-XPath にあなたのテストファイルを提供してください！

ここ にあなたのサイトの HTML と XPath と 結果を書いたテストデータを提供してください＞＜
そうすれば、あなたの XPath がテストに組み込まれ、半永久的にサポートされることでしょう＞＜
テストデータは、 CodeRepos のコミット権を取得すれば誰でも提供する事ができます。

テストデータの形式

テストデータの形式は以下のような形式です。

テストのタイトル
--------
<html>HTMLの内容</html>
--------
コンテキストノード（キホン的には / だけでいい）
--------
XPath => 結果（CSS セレクタのように div.class#id[attributeName="attributeValue"] というような文字列を空白区切りで ）
XPath => 結果
XPath => 結果
：
：

具体的にはこんな感じのファイルになります。

よろしくお願いします！

*1:'//form//input[3] はダメ＞＜