ネイティブ実装
-
Firefox 1.5(1.0?)+ -
Opera 9.0+ -
Safari 3.0+
Shibuya
.JS
8 年。
世界が XPath の真の実力を発見するのに要した時間である。
1999 年、W3C により勧告された XPath は、「なにコレ読めねえwww XPath きめえwww」などと言われもした、
ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「DOM まじめんどくせえ」という思いによって、ふたたび表舞台に招来された。
XPath は、DOM ツリーの「ancestor」と「descendant」、「lastChild」と「firstChild」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 8 年を自らの手で創り出すために、私は DOM 3 XPath に注目した。
XPath
// case 1
var result = document.evaluate(
'//div[@class="foo"]', document, null, 7, null);
// case 2
var expr = document.createExpression(
'//div[@class="foo"]', null);
var result = expr.evaluate(document, 7, null);
// 結果のインタフェースは第 5 引数で変わる
var result = document.evaluate(
'//div[@class="foo"]', document, null, 7, null);
var len = result.snapshotLength;
for (var i = 0; i < len; i ++) {
alert(result.snapshotItem(i)); // [object Node]
}
// 結果のインタフェースは第 5 引数で変わる
var result = document.evaluate(
'1 + 1 * 3', document, null, 1, null);
alert(result.numberValue); // 4
// 結果のインタフェースは第 5 引数で変わる
var result = document.evaluate(
'concat("foo", "bar")', document, null, 2, null);
alert(result.stringValue); // foobar
Firefox 1.5(1.0?)+ Opera 9.0+ Safari 3.0+
<ul>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
</ul>
var xpath = '//li[input[@checked]]';
var result = document.evaluate(
xpath, document, null, 7, null);
/*
CSS セレクタだと
input:checked で input は選択できるが
その親を選択はできない。(結果を条件にできない)
*/
/*
もちろん、 jQuery を使えばできる
すばらしい！
*/
var result = $('input:checked').parent('li');
<div id="fooTarget barTarget"
class="sortable movable draggable">
<div class="fooWrapper">
<div class="fooInnerWrapper">
<div class="fooContent">
<div class="fooInnerContent">
<div class="fooArea"></div>
<div class="barArea"></div>
</div></div></div></div></div>
というわけで
IE で速く動く
XPath エンジン作ってみた
DEMO
jQuery.xpath = function(selector, context) {
var result = document.evaluate(selector, ...);
/* ... result to array ... */
return jQuery.find(result, context)
};
$('//div//ul')
.xpath('li[input[@checked]]')
.addClass('foo')
.end()
.xpath('li[input[not(@checked)]]')
.addClass('bar')
.end()
.end()
という訳でリリースは
Coming Soon
こんなプレゼンツールを
作ったりもしてます
もし興味があれば
XPath エンジン
使ってみてください＞＜
おしまい！