IT戦記

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

JavaScript-XPath をリリースしました!さあ、あなたも 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.getElementByIddocument.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彡゜XPathXPath
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 にあなたのテストファイルを提供してください!

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

テストデータの形式

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

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

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

よろしくお願いします!

*1:'//form//input[3] はダメ><