BLOGサブスレッドの日常
2016.05.24
WebブラウザのJavaScriptコンソールでは、jQueryを使ってなくてもjQuery風に要素を抽出できる
mzsm
株式会社サブスレッドのみずしま a.k.a mzsm(@mzsm_j)です。こんにちは。
タイトルのとおりなのですが、Webブラウザの開発者ツールのJavaScriptコンソールでは、Webサイト側でjQueryを読み込んでいなくてもjQuery風の書き方で要素の抽出が可能です。
まずはjQueryを読み込んでいるサイトの場合を見てみましょう。
当然のことながら、jQueryのセレクタがそのまま利用できます。
次にjQueryを読み込んでいないサイトでは…
jQueryは読み込んでいないはずなのに、$
に何か生えてますね。
jQueryっぽくセレクタを書いてみると…
要素が抽出できました。
実は、JavaScriptコンソールが勝手にjQueryを読み込んでいる…というわけではありません。
これは、Command Line APIというもので、Chromeの開発者向けサイトにもちゃんと記載されています。
jQueryによく似たAPIを提供していますが、jQueryとは別物なので動作は同一ではありません。
例えば先ほどのケースでは、jQueryではセレクタに該当する要素すべてが抽出されていますが、Command Line APIでは最初に一致した要素ひとつのみが抽出されています。
jQueryと同様に該当する要素すべてを抽出したい場合は、$$(セレクタ)
と書きます。
今回はChromeの場合を紹介しましたが、Firefoxの開発ツールや、Microsoft EdgeのF12開発者ツールでも同様の機能が利用できます。
実態を明かすと、$(セレクタ)
はdocument.querySelector
の、$$(セレクタ)
はdocument.querySelectorAll
のショートハンド(略記法)となっています。
これらのメソッド、実はFirefoxでは3.5から、Chromeでは1から、IEでも8から実装されていました。
けっこう前から存在していたのですけど、知名度が低い…(あと速度を考えるとdocument.getElementById
やdocument.getElementsByClassName
などのほうが早い)。
JavaScriptコンソール、console.log
の出力を見るだけの場所じゃなくて、実は意外といろんな機能が入ってるんですよ?というお話でした。
この記事を書いた人
mzsm