HTML情報を取得する Xpath を覚えよう

Xpathは、スクレイピングでWebページの情報を取得する時によく利用します。Xpath を使用することで HTMLを解析し、タグに関する情報を取得することができます。

今回は、以下のHTMLページの任意の要素に、ブラウザのコンソールでアクセスする様々な方法をご紹介します。

Xpathの挙動をブラウザで確認するには、コンソールで $x(xpath)を実行します。

Xpath で特定のタグにアクセスするには、ロケーションパスを指定します。ロケーションパスは / 区切りで要素を指定する記法で、以下のようなパターンがあります。

上の要素から絶対パスで指定する

// body タグ直下の div タグにアクセスする場合
$x("/html/body/div")

// divタグ直下の2番目のpタグにアクセスする場合
$x("/html/body/div/p[2]")

一部のパスを省略する

// とすることで、途中のパスを省略することができます。

$x("//div") // 親の要素を全部省略
$x("/html//div") // htmlからdivまでの要素を省略

属性値を指定する

$x("//div[@id='container']") // id名を指定する
$x("//p[@class='description']") // クラス名を指定する

タグ内のテキストを指定する

// 完全一致
$x("//p[text()='Xpathについて']")
$x("//p[.='Xpathについて']")

// 部分一致
$x("//p[contains(text(), 'について')]") 
$x("//p[contains(., 'について')]")

. は自分の要素と子の要素テキスト全てを見て判定しますが、text() は自分の要素のテキストしか見ないので注意しましょう。

兄弟要素から指定する

following-sibling::タグ名または preceding-sibling::タグ名を使用すると、「〜の次（または前）にある要素」という指定ができます。

// クラス属性値が「header」のpタグの次のpタグ
$x("//p[@class='header']/following-sibling::p")

フォームの状態を指定する

$x("//input[@disabled]")
$x("//option[@selected]")

すべてのタグを指定する

タグ名の部分に *（アスタリスク）を使用します。

$x("//*[@class='description']")

条件を複数指定する

and または or でつなげます。

$x("//*[@id='container' and @class='outline']")
$x("//*[@class='description' or @class='header']")

否定

!= を使用します。

$x("//p[@class!='description']")

string() を使用します。

$x("string(//div)")
/*
Xpath
Xpathについて
Xpathとは、XML Path Languageの略で...
*/

上記は $x('string(//div/.)') の省略形で、子孫の要素全部を含めたテキストを返します。自分の要素内のテキストのみを取得する場合は、$x('string(//div/text())') とします。

$x("string(//div/text())")
/*
Xpath
*/

getAttribute("属性名") で取得します。

// 2番目のpタグのクラス名を取得
$x("//p[2]")[0].getAttribute("class")

[2]で2番目のタグを指定していますが、返り値は配列なのでさらに[0]と指定する必要があるので注意しましょう。

以上で基本的な説明は終わりです。他にもさまざまなメソッドがあるので、必要なものは随時調べてみましょう。

当社で開発した予定とタスクを同時に管理できるiOSアプリ「My Schedule - マイスケジュール -」をリリースしました。ダウンロード&評価のほどよろしくお願いいたします。

Cloud Cafe