jQueryを使わずちょっとしたDOM要素の取得ならquerySelector/querySelectorAll
jQueryを使わずちょっとしたDOM要素の取得ならquerySelector/querySelectorAllが超便利
ども、このところめっきり作業がフロントエンド周りの多いITかあさんです。
jQueryを使うほどでもない、けど、要素の取得はjQueryに慣れ親しんでいるから、要素の取得だけはjQueryチックにやりたい！
そんな時にはquerySelector/querySelectorAllが便利です。
document.querySelector(“#foo”);
document.querySelector(“.foo”);
document.querySelectorAll(“.foo”);
document.querySelector(“.foo”);
document.querySelectorAll(“.foo”);
ね！jQueryのおなじみの書き方と全く一緒でしょ！querySelectorAllの場合は配列で取得するので、取得した全てに処理を入れたい場合は、for構文で処理してあげるといいと思います。
ちょっとしたClickのアクションなど簡単なJavascriptであればjQueryを書くほどじゃ無い時に便利だと思います。
ヘッダー左のボタンをquerySelectorで取得し、クリックしたらalertを出すように、
コンテンツのlistにあたっているクラスに対してquerySelectorAllですべて取得し、for文で文字の色を青くする処理を行っています。