Prototype.js で XPath を手軽に扱うためのプラグイン XPath for Prototype というものが公開されています。
作者の amachang さんのブログ の、プラグイン公開を紹介する記事に、「他のライブラリのプラグインに関して」という見出しでこんなことが……。
もし
誰か書いてくれる人がいればとてもありがたいなあ。。。とか思っています。
いませんよねいませんよね＞＜？
面白そうなので、書いちゃいました(^-^)
XPath for Prototype の MooTools 版、名付けて「XPath for MooTools」（まんま）。
【※2008/06/12 ver.0.2 にバージョンアップ】
.jsファイル本体
以下よりダウンロードしてください。
※2008/06/10に正式公開されたMooTools v.1.2に対応しました。従来のバージョン(v.0.1)はMooTools1.2には対応していません。MooToolsをバージョンアップする際は XPath for MooTools も v.0.2 にバージョンアップをお願いします。
※ XPath for Prototype と比較すると分かると思いますが、ほとんどソースをそのまま流用させていただいています。
MooToolsはProtptype.jsをお手本に開発されたものなので、仕様もコンセプトもとてもよく似ているのです。
動作に必要なモノ
- MooTools v1.x
※MooTools v1.2βでは動作確認を行っていません。多分 compatible オプション付きでダウンロードしたモノでないと動かないと思います。2008/06/10に正式公開された新バージョンのMooTools v.1.2に対応しました。従来どおり MooTools v.1.11 にも対応しています。 - JavaScript-XPath
※XPathをネイティブでサポートしていないブラウザのために必要です。
使用方法
- MooToolsのJavaScriptファイルを読み込みます。
- JavaScript-XPathのJavaScriptファイルを読み込みます。
- XPath for MooToolsのJavaScriptファイルを読み込みます。
- XPathで楽しんでください！
※ 本家サイトの真似っこです(^-^;)
簡単なサンプル
こちらも XPath for Prototype のサンプルをベースにしています。
MooTools用にカスタマイズした部分に対する動きのサンプルも追加しています。
<html>
<head><title>Hello, XPath!</title>
<!-- import MooTools -->
<script type="text/javascript" src="mootools.js"></script>
<!-- import JavaScript-XPath -->
<script type="text/javascript" src="javascript-xpath.js"></script>
<!-- import XPath for MooTools -->
<script type="text/javascript" src="xpath4mootools.js"></script>
<!-- use XPath -->
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function() {
var li = $x('//ul/li[@title="xpath"]')[0];
//li.setHTML('Enjoy ' + li.innerHTML + '!'); // <- for MooTools v.1.11
li.set('html', 'Enjoy ' + li.innerHTML + '!'); // <- for MooTools v.1.2
// alert($(document.body).xpath('ul/li[1]')[0].innerHTML);
alert($(document.body).getElementByXPath('ul/li[1]').innerHTML);
// alert(document.getElementsByXPath('//ul/li[1]')[0].innerHTML);
alert(document.getElementByXPath('//ul/li[1]').innerHTML);
// Demo of Original Feature for MooTools
document.getElementsByXPath('//ul/li').addEvent('mouseenter', function (event) {
event = new Event(event);
event.target.setStyle('font-style', 'oblique');
}).addEvent('mouseleave', function (event) {
new Event(event).target.setStyle('font-style', 'normal');
});
});
// ]]>
</script>
</head>
<body>
<h1>Hello, XPath!</h1>
<ul>
<li title="xpath">xpath</li>
<li>dom core</li>
<li>css selector</li>
</ul>
</body>
</html>
実際の動きを確認できます。→デモ
サポートブラウザ
- MooToolsの動作する（サポートされている）全てのブラウザ：
- IE 6.0以降
- Safari 2.0以降
- Firefox 2.0以降
- Opera 9.0以降
XPath for Prototype との差異
XPath for MooTools は、XPath for Prototype をお手本に（てゆーかぶっちゃけほとんどソースを流用）しているので、XPath for Prototype (0.1.2) と互換性があります。
以下に、MooTools用にカスタマイズされた追加機能を中心に、XPath for MooTools の機能を簡単に紹介します。（XPath for MooTools 固有の機能は強調表示しておきます。）
- $x() 関数
- 引数に XPath 表現（、取得開始位置、結果のソートを期待するかどうかの真偽値）を受け取ります。
戻り値は $$()関数と同じElements型になる（内部で$$()関数を呼んでいる）ため、複数要素への一括のスタイル設定・イベントハンドラ追加等が可能です。 - document.getElementsByXPath() メソッド
- 引数に XPath 表現（、取得開始位置、結果のソートを期待するかどうかの真偽値）を受け取ります。機能的には $x() 関数と全く同じです。
- document.getElementByXPath() メソッド
- 引数に XPath 表現（、取得開始位置、結果のソートを期待するかどうかの真偽値）を受け取ります。
戻り値は、要素が取得できた場合はその要素（複数存在する場合は最初の要素1つのみ）(Element型)、存在しなかった場合は null です。
初めから要素が一意に特定できることが分かっている XPath 表現を用いるときに有効です。 - Element::xpath(), Element::getElementsByXpath() メソッド
- 引数に XPath 表現（、結果のソートを期待するかどうかの真偽値）を受け取ります。
取得開始位置はその要素自身となります。
戻り値は $x() 関数や document.getElementsByXPath() メソッドと同様です。 - Element::getElementByXPath() メソッド
- 引数に XPath 表現（、結果のソートを期待するかどうかの真偽値）を受け取ります。
取得開始位置はその要素自身となります。
戻り値は document.getElementByXPath() メソッドと同様です。
※ getElementByXPath() メソッド（"Elements"じゃない方）は、最初に見つかった要素1つのみを返す getElement() というメソッドがMooToolsに用意されているので、そのコンセプトを受け継いで用意しました。
