前回はセレクタの関係を使った要素の指定方法を紹介しましたが、今回はもう少し突っ込んだ「属性」を使った「属性セレクタ」を紹介します。
属性というのは例えば「<a>」タグであれば「<a href=”URL”>リンク</a>」といったリンクを記述するわけですが、「href=”URL”」の部分が属性です。
もっと詳しく書くと「href」が「属性名」で「”URL”」の部分が「属性値」です。
属性は1つのタグで複数指定されることもあります。
属性セレクタ
取得したい要素にIDやクラスが付けられていないけれど、属性はある、または属性値を取得したい場合に使います。
よくあるのはフォームのテキストボックスやテキストエリア、ラジオボタン、チェックボックス、セレクタボックスなどの取得です。
以下のようなHTMLがあったとします。
<form class="form">
<div class="field">
<input type="text" name="hoge" value="リンゴ">
</div>
<div class="field">
<input type="text" name="fuge" value="オレンジ">
</div>
</form>フォームのパーツというのはほぼ必ず「name」や「value」属性が付いていたりしますが、これを使って取得します。
E[foo=”bar”]
リンゴのテキストボックスを指定する場合は以下のようにします。
form input[name="hoge"]リンゴという値があるテキストボックスを指定する場合は以下のようにします。
form input[value="リンゴ"]E[foo^=”bar”]
「name」属性が「h」で始まるテキストボックスを指定する場合は以下のようにします。
form input[name^="h"]E[foo$=”bar”]
「name」属性が「e」で終わるテキストボックスを指定する場合は以下のようにします。
form input[name$="e"]この場合は「hoge」と「fuge」ともに最後が「e」で終わるので2つが該当します。
E[foo*=”bar”]
「name」属性に「ge」が含まれるテキストボックスを指定する場合は以下のようにします。
form input[name*="ge"]この場合は「hoge」と「fuge」ともに「ge」というスペルが含まれるの2つが該当します。
リンクの場合
もう1つ、リンクの場合は以下のように指定します。
URLが完全一致なら
a[href="URL"]となり、URLに特定の文字列が含まれる場合は
a[href*="URL"]のように指定します。
「<a>」タグのURL自体(href属性)を取得したい場合は以下のようにします。
a[href]簡単ですね！