Xpathは、スクレイピングでWebページの情報を取得する時によく利用します。Xpath を使用することで HTMLを解析し、タグに関する情報を取得することができます。
今回は、以下のHTMLページの任意の要素に、ブラウザのコンソールでアクセスする様々な方法をご紹介します。
任意のタグにアクセスする
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 - マイスケジュール -」をリリースしました。ダウンロード&評価のほどよろしくお願いいたします。