取得したセレクタの検証・確認

昨日、一昨日と2日連続でセレクタの取得方法を紹介した。しかし、取得したセレクタが正しいかの確認・検証の方法は紹介してこなかったので、ここではその方法を扱う。

image: OK sign — Photo by Polina Zimmerman from Pexels

昨日の記事では、Yahoo! Japan のページにおける検索ワード入力用のテキストボックスのセレクタを取得した。

how-to-make-stock-trading-system.dogwood008.com

上記記事中では、下記の自動生成したセレクタと、手動で作成したセレクタの2つを掲載した。

'.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4'
input[type=search]

これらを検証していこう。mac の人はCmd⌘ + Opt⌥ + I 、 Windows or Linuxの人は、 Ctrl + Shift + I を押せば、昨日とは違い、HTMLの要素を選択できない状態で DevTools が開かれる（環境によっては単に F12 キーを押すだけでもOK）。ここで開かれたペインの上部タブから、 Console を選択。

次に、 $('【セレクタ】') と入力¹する。上記の例では、

$('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4')

となる。囲む記号はシングルクォート( ' ) でもダブルクォート ( " )でもどちらでも良い²。

入力後、Enterキーを押すと、もし該当する要素があれば、HTMLタグが表示される。さらに、そのHTMLタグにマウスカーソルをあてると、該当する要素がハイライトされ、色が付いた状態で表示される。これが目当ての要素であれば、セレクタの取得は無事完了ということになる。

ちなみに、前述の記事の通り、先に挙げた2つのセレクタのうち、後者を使用しても同じ要素を指し示すことができる。これは表示されるHTMLタグが同じことからそれがわかる。

なお、該当する要素がない場合は、 null と表示される。

これには jQuery というライブラリまたは、Console Utilities API を使用している。どちらを使用するのかは、「そのHTMLページでjQueryが読み込まれているか否か」で決まる。読み込まれていれば jQuery 、そうでなければ Console Utilities API である。ただ、その $ 関数は少なくとも今回の目的に限ってはどちらも同様の動作を行うので、今どっちを使用しているかを特に意識する必要は無い。↩
ただし、実際には入れ子の順序に気をつける必要がある。うまく行かなかったらもう片方のクォートを使おう。↩