jQueryを使っていないサイトをjQueryセレクタで調査

何を言ってるのかわからねーと思うが(AA略)

Webページでセレクタを使って要素を調査する際、 $("div") といった感じのコードをブラウザのコンソール上で叩いてデバッグ出力したりすると思います。このやり方は通常、jQuery をロードしているサイトでしか使えません。 jQuery を使っていないサイトの場合は諦めて pure js のdocument.querySelectorAll("div") とかすれば良いのですが、諸般の事情によりどうしても jQuery を使って調査したいという方もいるのではないでしょうか。(私もその一人でした)

実は、 jQuery を使っていないサイトでも jQuery を使ったセレクタの調査は可能です。

方法

以下のコードをブラウザコンソール上で打ち込むことで jQuery が利用できるようになります:

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.4.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

テスト

では Amazon.co.jp のページで試してみましょう。Amazon.co.jp は、現時点(2019/06/06)では jQuery を使っていません。

> $("div")

  // jQueryを使っていない...
  <div id="a-page">...</div>

ではさきほど紹介したハックを試してみましょう:

// jQueryを無理やりロード:
> var jq = document.createElement('script');
> jq.src = "https://code.jquery.com/jquery-3.4.1.min.js";
> document.getElementsByTagName('head')[0].appendChild(jq);

// 読み込めた?
> $("div")

  // キタ━(゚∀゚)━!
  [0 … 99]
  [100 … 199]
  [200 … 299]
  [300 … 399]
  ...

以上、超ニッチなTIPでした。

PR:時事ネタチェックの時間節約!
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。