【JavaScript】備忘録① getElementByIdとquerySelectorの違いについて

動きのあるWEBサイトを作る際、CSSなどいろいろな方法がありますが、
メインで使われる言語といえばJavaScriptだと思います。

今回は、HTML側のIDやクラスを取得する際によく出てくる
「getElementById」と「querySelector」の違いとそれぞれの使用法について簡単に説明しようと思います！

「getElementById」と「querySelector」の違い

◆getElementById

getElementByIdは、指定されたID属性を持つ要素をドキュメント内から取得します。
ページ内でIDは一意であることが求められるため、getElementByIdによって取得される要素は一つです。その為、個人的な感想ですがIDを取得しに行ってると一目でわかるので、IDを取得するなら、getElementByIdを使った方が、可読性が高いと思っています。

使用例:

const element = document.getElementById('box_open');

◆querySelector

querySelectorは、id属性やclass属性などを意識せずにHTML要素をセレクタ指定し取得することができます。「querySelector()」だけであらゆるHTML要素を取得することができるため、柔軟な対応ができます。

使用例:

const element = document.querySelector('#box_open'); // IDセレクタ
const firstText = document.querySelector('p'); // タグセレクタ
const bgColor = document.querySelector('.boxBgColor'); // クラスセレクタ

まとめ

getElementByIdとquerySelectorは、それぞれの用途に応じて使い分けることで、適切な要素の取得が可能です！！