JavaScriptでDOMの要素を取得する際、querySelector と getElementById はよく使われるメソッドです。しかし、これらにはいくつかの違いがあります。
getElementById とは？
getElementById は、指定した id 属性を持つ要素を取得するメソッドです。
＜例＞
const element = document.getElementById("myElement");
console.log(element); // id="myElement" の要素が取得されるこのメソッドは idがユニークであることを前提 としているため、複数の要素を取得することはできません。
querySelector とは？
querySelector は、CSSセレクターを使って要素を取得するメソッドです。
＜例＞
const element = document.querySelector("#myElement");
console.log(element); // id="myElement" の要素が取得されるこのメソッドは id だけでなく、クラスやタグ名でも要素を取得できます。
例えば、クラス .myClass を持つ要素を取得する場合
const element = document.querySelector(".myClass");また、querySelector は最初に見つかった1つの要素だけを取得します。複数の要素を取得したい場合は querySelectorAll を使います。
主な違いのまとめ
| 比較項目 | getElementById | querySelector |
| 取得方法 | idのみ | CSSセレクター |
| 戻り値 | 1つの要素 | 最初の1つの要素 |
| 複数要素の取得 | 不可 | 「querySelectorAll」を使えば可能 |
| パフォーマンス | 高速 | やや遅い（内部でCSSパースがあるため） |
結局どちらを使うべき？
どちらもメリット・デメリットあってどっちを使えばいいのと思っているでしょう。私としては使い分けるのがいいと思います。
idで要素を取得するならgetElementByIdが最速でおすすめ- クラスやタグで要素を取得する場合は
querySelectorを使う - 複数の要素を取得したい場合は
querySelectorAllを使う
使い分けるのめんどくさいな～と思う人は「querySelector」だけでもいいでしょう。ただ、高速化したい場合は積極的に「getElementById」を使ってみてください！
使い分けを意識すれば、より効率的なコードが書けるようになります。
コメント