XPath 基礎 (2) 属性値での指定

HTMLタグの属性値の値によって、何らかの要素を指定したい場合があります。

<div class="foo bar">
</div>
<div id="hoge">
</div>
<div name="hoge">
</div>


CSS の場合、上記であれば、 以下のようなセレクタで指定できます。

.foo { ... }
#hoge { ... }
[name="hoge"] { ... }


XPath の場合は、以下のようになります。

//div[contains(@class, 'foo')]
//div[@id='hoge']
//div[@name='hoge']


上記を見てわかる通り、XPath では属性を @~ であらわします。@id なら id 属性ということになります。

CSS セレクタはあくまで HTML タグを選択するものですが、XPath では属性値を取得するために使うこともあります。そういった場合には、例えば //div/@id のようにして属性を指定することになります。

「id 属性が hoge であるもの」を指定するには、@id='hoge' とします。

name 属性でも同じわけですが、class 属性は contains(@class, 'foo') となっています。

これは、class 属性の値はあくまでも "foo bar" であって、"foo" ではないからです。CSS では .foo とすればそのクラス foo が指定されているものを選択できますが、XPath では属性毎に記法が分かれているわけではないため、「class 属性に foo が含まれているもの」という指定をしなければなりません。

それを指定するのが contains(@class, 'foo') というわけです。この contains は関数であり、他にも様々な関数が使用できます。

関数はネストさせることもできます。例えば「id 属性に hoge含まないもの」を選択するなら、not を使って以下のようにできます。

//div[not(contains(@id, 'hoge'))]


関数は他にも様々あり、それらを使用することで複雑な検索を行うことができます。