Firefox で XPath により要素を指定する - Firebug と FirePath を使って

1. アドオン Firebug と FirePath をインストールする

Firefox で XPath により要素を指定したい。

XML Path Language – Wikipedia とは、

XML Path Language （XPath; XMLパス言語） は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。

予め Firefox に、以下２つのアドオンをインストールしておく。

1. Firebug
2. FirePath

 

2. Firebug で対象要素を指定する

例えば、 Yahoo!モバゲーの日記一覧 において、記事タイトルのアンカー要素を XPath で指定する。

マウスポインタを、対象要素の上に置き、

• 右クリック > Firebug で要素を調査

を選択する。

より効率的に対象を選択するには、

1. マウスポインタを対象要素の上に置き、
2. Ctrl + Shift + C を押し、
3. マウスをクリックするか、Enter キーを押す。

このとき、Ctrl + Shift を、左小指で２つのキーを押さえると効率的に作業を行える。

（ショートカットキーは、Firefox ボタン > Web 開発 > Firebug > ショートカットのカスタマイズ を参照。はてなブックマーク のアドオンをインストールしている場合、コメントを表示するショートカットキーを解除し、Firefox を再起動する。）

Firebug の HTML タブを確認すると、この例の場合、対象要素を、親要素の class 属性を利用して指定できそうなことを推測できる。

 

3. FirePath で XPath を指定する

次に、対象の要素を XPath で指定する。

1. Firebug の FirePath タブをクリックし
2. XPath フィールドに、以下の XPath を入力して、Enter キーを押す。

//*[@class="lv2-lay"]/a

これにより、XPath の指定した要素が点線で囲まれる。

目的の対象要素以外の要素が点線で囲まれていなので、上記の XPath で良さそうなことが分かる。