【Javascript】XPathを使う（document.evaluate）

Tweet

Category JavaScript 2010/06/20

このような関数を定義しておくと使いやすいでしょう

document.getElementsByXPathなんてメソッドはないですが、document.evaluteを使った一連のよくある処理をまとめておくと使いやすいです。HTMLに適用するときは第3引数はnullでよい、要素を取得するつもりなら第4引数は大体XPathResult.ORDERED_NODE_SNAPSHOT_TYPEでよいなど、お決まりのパターンがあります。

document.getElementsByXPath = function(expression, parentElement) {
    var r = []
    var x = document.evaluate(expression, parentElement || document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
    for (var i = 0, l = x.snapshotLength; i < l; i++) {
        r.push(x.snapshotItem(i))
    }
    return r
}

jQueryを使っていたら、プラグインを利用する。prototypeを使っていたら内部のメソッドを使うという手もあります。

使ってみる

このページのHTMLで試してみる（※HTMLが変わってしまったため動かない例があります）。

・ ブログのタイトルのH1要素の中の文字を取得

・ 別な記述で取得

・ このページの記事の数を取得 → id=”content” の要素中のh2要素を取得して数える

・ getElementsByClassNameっぽいことをする（class=”cat-item”の要素は何個？）

・ p要素を3個おきに赤文字にする。要素の配列はjQueryで処理できる。

・ 各記事の2段落目（2つ目のp要素）を緑文字にする。何に使えるんだ？という疑問は置いといて。

その他メモ

参考: https://developer.mozilla.org/Ja/Introduction_to_using_XPath_in_JavaScript

Xpath詳細: http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html

document.evaluateは基本的に速い。

prototypeの中ではdocument.evaluateを使っている（使える環境では使っている）。
jqueryの内部ではdocument.evaluateを使っていないようだ。

XPathに対応していないブラウザにはこのへんで対応
http://coderepos.org/share/wiki/JavaScript-XPath
http://coderepos.org/share/wiki/JavaScript-XPath/bindings/jQuery

jqueryはCSSセレクタっぽいセレクタを利用しますが、XPathもステキですよ。そのうちほとんどのブラウザでネイティブにXPathに対応するようになったら、どんどん使いましょう。

メジャーなブラウザで問題なのはIE8のみ。FirefoxもGoogleChromeもOperaもdocument.evaluateをサポートしている。