ブックマークレットや、コンソールから特定の情報をサクッと取り出したいみたいなケースがあったので、いくつか調べたことをメモに残す
セレクタの記述方法のサンプル集
基本的に下記読めばOKって内容ではある
CSS セレクター - CSS: カスケーディングスタイルシート | MDN
特定の要素の子要素を指定
要素以下どこでもOK
$('div img')
div以下のどこかのimg要素
直下の要素
$('div > img')
div直下のimg要素
要素の属性に条件指定する
完全一致
$('a[href="https://example.com"]')
href
がhttps://example.com
のa
要素
包含条件
$('a[href*="example"]')
href
にexample
が含まれるa
要素
他にも前方一致(^=
)、後方一致($=
)などもある
否定
$('body :not(p)')
body
以下のp
要素ではない要素
この例でのp
にはセレクタが入るので複雑なこともできる
複数条件
or条件
$('a[href*="fuga"],a[href*="hoge"]')
href
にfuga
が含まれるか、href
にhoge
が含まれるa
要素
and条件
$('a[href*="fuga"][href*="hoge"]')
href
にfuga
が含まれるかつ、href
にhoge
が含まれるa
要素
特定の要素を持っているかどうか(has)
:has() - CSS: カスケーディングスタイルシート | MDN
<img>
を直接子に持つ<a>
要素を選択
a:has(> img)
特定の属性を持っていない要素(hasとnotの組み合わせ)
div:not(:has(svg[data="hoge"]))
子要素に「data
がhoge
なsvg
を持っていない」div
要素
親要素に条件をつける
最終的にほしい要素はa
タグだったとして
a
タグのどこかの親要素のdiv
タグに条件を入れたい場合
'div.hoge > div:not(:has(svg[data="hoge"])) a[href*="fuga"]'
というように特定階層のdiv
に条件を持たせてその下のa
タグといったようなセレクタを書くことで特定できる
この例を詳しく書くと次のようになる
hoge
クラスを持つdiv
要素直下のdata
属性がhoge
のsvg
要素を配下に持っていないdiv
要素- 配下の
href
にfuga
を含むa
タグ
例が結構複雑ではあるがこういうこともできる
注意点として、div
に条件を付ける場合にdiv
だとどこの階層のdiv
?をしっかり特定しないと条件が反映されない
document.querySelectorAll('div.hoge div:not(:has(svg[data="hoge"])) a[href*="fuga"]')
ではうまくいかない
document.querySelectorAll('div.hoge > div:not(:has(svg[data="hoge"])) a[href*="fuga"]')
要はdiv要素っていっぱいあるよねってことなのでどこのレベルのDivでnot hasなのかを明示的にしてあげないとうまく除外できないって感じだった
構造の変化に弱いけど…
おわり
これだけ覚えればたいていのことはなんとかなりそう
現時点ではテキストの値を条件には含められないようなのでそれなら最初からXPathで良いのでは?という思いもある…