初めに今回は、webのスクレイピングが増えてきましたがその中でよく利用するCSSセレクタやXPathから特定の要素を取得する方法についてまとめます
セレクタから取得する
基本的な取得方法
要素から取得
<div>のようにdivを取得する場合にはdivと要素名での取得ができます
idを指定して取得
<div id=”target”>のようにクラス属性の”target”を取得する場合には#targetのように「#id名」で取得できます
<div id="target>
テキスト
</div>
また、div要素のclass属性を取得する場合はdiv#targetのように「div#id名」で取得できます
クラスを指定して取得
<div class=”target”>のようにクラス属性の”target”を取得する場合には.targetのように「.class名」で取得できます
<div class="target>
テキスト
</div>
また、div要素のclass属性を取得する場合はdiv.targetのように「div.class名」で取得できます
連続した要素から取得する
リストのように連続した要素が並ぶものから任意の1つを取得したい場合は取得したいセレクタの後に:nth-child()をつけることによって取得ができます
任意の1要素を取得したい場合
下記のようなリストから「リスト1」を取得したい場合にはli:nth-child(1)とすることで1番目の要素を取得することができます
リスト2を取得したい場合にはli:nth-child(2)のように「:nth-child(取得したい位置)」とすることで任意の位置を取得することができます
<ul>
<li>リスト1</li>
<li>リスト2</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>