XPath でぐりもんだもん / Shibuya.js Technical Talk #1

XPath でぐりもんだもん

cho45(さとう) / lowreal.net

はなしの内容：

DOM level3 XPath
拙作関数 $X

ノート

E4X の話は入らないっぽいので $X 主体で

GM でよくあること

クラス列挙したい (getElementsByClassName)
ある要素を選択したい

とか、既存のドキュメントを何かするのが殆ど。

JavaScript での XPath

DOM Level 3 の仕様

現在では Gecko のみサポート
Opera も 9 からサポート？

こんなん:

var xpathResult = 
    document.evaluate(
                      expression,
                      context,
                      resolver
                      XPathResult.ANY_TYPE,
                      null
    );

覚えるのがめんどい

こんなにいっぱい引数覚えられないよ。

MSIE でも一応 XPath 自体は使える。ただし W3C 準拠の仕様ではなくてややこしい

$X 関数

中身は気にしない。(とりあえず)

定数とか覚えるの面倒くさいのでラップする。

何か適当な JS オブジェクトを返す。

実装はサイトに書いときます。
(書いてあります)

ノート

XPath を素で使おうとすると結構面倒くさい (定数を覚えたりとか) のでラッパを作った。

完全にブラックボックスとして使っていい。中身は気にしない。JS の話がメインじゃない (謎)

$X の実装

2006-03-16 XPath, $X function, NSResolver

で、XPath る

// セクションクラスな div 列挙
$X("//div[@class='section']");

// 最初の h1 要素
$X("//h1[0]");

// 最後の p 要素
$X("//p[last()]");

// address 要素以下で、
// mailto スキームから始まる a 要素
$X("//address//a[starts-with(@href, 'mailto:')]");

XPath は式1

要素選択以外でも使えるよ？

$X("string()", node); //=> "Foo Bar"

<h1>Foo <em>Bar</em></h1>
から文字列 "Foo Bar" を得たいとき

$X の第二引数はトップレベルでのコンテキストノード。string() 関数は引数を省略したとき、コンテキストノードの文字列値を返す。

XPath は式2

ほかに

$X("contains(., 'Hoge')"); //=> true/false

ドキュメント内に文字列 "Hoge" があるか

$X("count(//self::comment())"); //=> ex. 2

ドキュメント中のコメントの数を数える

contains() 関数は引数で指定した文字列がコンテキストノードに含まれている場合 true を返す。

コメントノードを常の表示する GM なんかも簡単に書ける。(それ自体が意味があるのかはともかく)

XPath ではっぴーJSらいふ

低レベル DOM だとめんどくさいのも楽。