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

XPath でぐりもんだもん

cho45(さとう) / lowreal.net

はなしの内容：

• DOM level3 XPath
• 拙作関数 $X

GM でよくあること

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

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

JavaScript での XPath

DOM Level 3 の仕様

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

こんなん:

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

$X 関数

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

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

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

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

で、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" を得たいとき

XPath は式2

ほかに

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

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

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

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

XPath ではっぴーJSらいふ

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