SOFTELメモ

Softel Inc.

【Javascript】XPathを使う(document.evaluate)

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

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="tags"の要素は何個?)

・ 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をサポートしている。

関連するメモ

コメント