Xpathを記述できるフレームワークとして jQueryという便利なフレームワークがあります。 例えば「 #wrapper というIDを持つDIVの中の #menuというIDを持つDIVの中の Aタグの中のIMGタグ」のオブジェクトが１行で取得できます。 では早速使ってみます。

■ 使い方

• 1.　jQueryページhttp://jquery.com/から「Download jQuery (compressed) 19kb」をダウンロードする

• 2.　ダウンロードしたファイルを任意のパスにコピーし読み込ませる

■ prototype.js とのコンフリクト回避

<script>
// 下記2行を追加
jQuery.noConflict();
var j$ = jQuery;
</script>

でコンフリクトを回避しておきます。

■ ID, クラス名, タグ名による指定

// id="hogehoge" のjQueryオブジェクトを取得
jq_obj=j$("#hogehoge");

// class="hogeclass" のjQueryオブジェクトを取得
jq_obj=j$(".hogeclass");

// タグ<div> のjQueryオブジェクトを取得
jq_obj=j$("div");

■ こんな指定も出来ます

同ページ内へのリンクを抽出してその name="" を抜き出す j$('a[@href*="#"]').each(function(){ p = this.href.split('#'); name=p[1]; alert(name); });

■ サンプルソース

下記リンクをクリックしてソースを表示させて下さい サンプルソース1の実行 サンプルソース2の実行 サンプルソース3の実行

■ jQueryを使うコツ

jQueryを使うコツは基本的に全てjQueryオブジェクトを返します。 （prototype.jsとここが違うので注意） DOMオブジェクトを返したいときは get() メソッドを使用します。

コーディング例：クラス名が icon_on の＜a＞タグの中の＜img＞タグを取得する

jq_obj=$("a[@class=icon_on]/img", $target); // jQueryオブジェクトを返す。
dom_obj=$("a[@class=icon_on]/img", $target).get(0); // DOMオブジェクトを返す。
//
// jQueryオブジェクトからDOMオブジェクトを作成するには get メソッドを使用します。
// dom_obj=jq_obj.get(0); // 1番目のDOMオブジェクトを返す

jQuery 開発者向けメモ

参考： http://www.mikage.to/jquery/jquery_basic.html