JavaScript-XPath とは
JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。
一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で 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 => 結果 : :
具体的にはこんな感じのファイルになります。
よろしくお願いします!