jQueryなしでもセレクタが使えることをはじめて知った日。

jQueryに慣れすぎてて昨日まで知りませんでした。
仕事でレガシーなWEBアプリのエンハンスを任されて、当然jQueryとか使えなくてdocument.getElementById()とdocument.getElementsByName()を駆使して
懐かしみながらコードを書いていたのですが、ふと調べ物をしているときに「document.querySelector」というものがあることがわかりました。

これを使うとjQueryと同じようにセレクタが使えます。以下の様な感じで。
セレクタってjQueryの専売特許だと思っていたんですが違ったんですね。そういえばCSSでも使えましたね。

// 以下の様な取得がjQueryなしでできます。
document.querySelector('div.content a'); // divでclassがcontentの中にある最初のリンクを取得
document.querySelectorAll('input[type="text"]'); // テキストボックスをすべて配列で取得

これは便利です。いままでforで回してtagNameとかで判定していたのをすべて書き直したくなります。

２種類あるので注意。詳細は以下のMDNを参照ください。

developer.mozilla.org

ちなみにelementでも使えるみたいです。element.querySelector()みたいに。
あとdocument.querySelector('#id')よりdocument.getElementById()のほうが早いみたいです。（MDNにそう書いてあった）

こういう便利なものは知ってないともったいないですね。
とは言ってもjQueryを使うのがベストだと思いますが、document.が$で済むので。 jQueryを使えないレガシーなWEBアプリを保守するはめになった時には大きな武器になる気がします。