webサイト要素、属性の取得方法

初めに今回は、webのスクレイピングが増えてきましたがその中でよく利用するCSSセレクタやXPathから特定の要素を取得する方法についてまとめます

セレクタから取得する

基本的な取得方法

要素から取得

<div>のようにdivを取得する場合にはdivと要素名での取得ができます

idを指定して取得

<div id=”target”>のようにクラス属性の”target”を取得する場合には#targetのように「#id名」で取得できます

<div id="target>
  テキスト
</div>

クラスを指定して取得

<div class=”target”>のようにクラス属性の”target”を取得する場合には.targetのように「.class名」で取得できます

<div class="target>
  テキスト
</div>

連続した要素から取得する

リストのように連続した要素が並ぶものから任意の１つを取得したい場合は取得したいセレクタの後に:nth-child()をつけることによって取得ができます

任意の１要素を取得したい場合

下記のようなリストから「リスト１」を取得したい場合にはli:nth-child(1)とすることで１番目の要素を取得することができます

リスト２を取得したい場合にはli:nth-child(2)のように「:nth-child(取得したい位置)」とすることで任意の位置を取得することができます

<ul>
  <li>リスト１</li>
  <li>リスト２</li>
</ul>

規則性を指定して複数取得する

連続した要素から奇数の値を取得したい場合などは「:nth-child(取得したい位置)」の取得したい位置の部分に2n+1と奇数を指定するようにすると奇数の要素が取得できます
ちなみに奇数であれば「odd」を指定しても取得できます。また、偶数の場合はtr:nth-child(2n)とするかtr:nth-child(even)とすることで取得できます

xPathから取得する

任意の要素を取得する

下記のようにdiv要素を取得する際は、/ divのように「/要素」で指定します

<div>
  テキスト
</div>

<div>
  <span>
    テキスト
  </span>
</div>

属性から取得する

要素にidやclassといった属性を指定して取得したい場合には/div[@id=”id”]のように@を前につけて@属性名とします
class属性なら@class=”class”のように指定します

<div id="id">テキスト</div>

兄弟要素を取得する

検索する兄弟要素が前にある場合

例えば下記のような構造のフォームからspanで囲まれた「ラベル」のテキストからinput要素を取得したい場合は
/form/span[contains(text(),”ラベル”)]/preceding-sibling::inputのようにpreceding-sibling::{検索する要素}のように選択します

<form>
  <input type="checkbox" value="1" />
  <span class="label">ラベル</span>
</form>

検索する要素が後にある場合

次の例では、input要素が「ラベル」テキストよりも後にあります。
この場合は、/form/span[contains(text(),”ラベル”)]/following-sibling::inputとfollowing-sibling::{検索する要素}のように指定します

<form>
  <span class="label">ラベル</span>
  <input type="checkbox" value="1" />
</form>