getElementById, querySelectorの違い | DOM APIの基本 | JavaScript 超完全入門 基本から発展までのすべて

getElementById、querySelectorメソッドとは？

JavaScriptでDOM操作を行う際、特定の要素を選択して操作することは非常に重要です。getElementByIdとquerySelectorは、要素を選択するための代表的なメソッドですが、それぞれの使い方や違いを理解することで、より効率的にDOMを操作できます。この記事では、この2つのメソッドの違いを詳しく説明します。

getElementByIdとは？

getElementByIdは、指定されたIDを持つ要素を取得するためのメソッドです。HTML内でIDは一意であるため、このメソッドは常に1つの要素を返します。

基本的な使い方

const element = document.getElementById("myElement");
element.textContent = "テキストが変更されました！";

この例では、IDがmyElementの要素を取得し、そのテキストを変更しています。

特徴

• 一意のIDを持つ要素：IDは文書内で一意なので、常に1つの要素のみが選択されます。
• 高速なパフォーマンス：IDを直接指定して要素を取得するため、他のセレクタよりもパフォーマンスが高いとされています。

querySelectorとは？

querySelectorは、CSSセレクタを使って、最初に一致した要素を取得するメソッドです。クラス名、ID、タグ名など、CSSセレクタに基づいて要素を選択することができます。

基本的な使い方

const element = document.querySelector(".myClass");
element.style.color = "red";

この例では、クラス名がmyClassの最初の要素を取得し、その文字の色を赤に変更しています。

特徴

• CSSセレクタの使用：クラス名、ID、タグ名など、CSSのセレクタを使って柔軟に要素を選択できます。
• 最初に一致する要素：一致する要素が複数ある場合は、最初の要素だけが選択されます。

getElementByIdとquerySelectorの違い

次に、getElementByIdとquerySelectorの違いを表で比較してみましょう。

どちらを使うべきか？

状況に応じて、どちらのメソッドを使うかを選択します。

• IDが一意である場合：IDが明確に定義されていて、それに基づいて要素を取得したい場合はgetElementByIdが適しています。高速で、シンプルな記述が可能です。
• 複雑なセレクタを使用したい場合：クラス名やタグ名、属性などを組み合わせたCSSセレクタを使いたい場合はquerySelectorが適しています。より柔軟な要素選択が可能です。

実際の使用例

以下は、getElementByIdとquerySelectorをそれぞれ使った例です。

getElementByIdを使った例

const title = document.getElementById("pageTitle");
title.textContent = "新しいページタイトル";

この例では、IDがpageTitleの要素を取得し、ページタイトルを変更しています。

querySelectorを使った例

const button = document.querySelector(".btn-primary");
button.style.backgroundColor = "green";

この例では、クラス名がbtn-primaryの最初のボタン要素を取得し、その背景色を緑に変更しています。

まとめ

getElementByIdとquerySelectorは、どちらも要素を取得するために使われるメソッドですが、それぞれ異なる特徴を持っています。getElementByIdは高速で特定のIDを持つ要素にアクセスする際に便利です。一方、querySelectorはCSSセレクタを使って柔軟に要素を選択できます。使用するシーンに応じて、適切なメソッドを選択することで、より効率的なDOM操作が可能です。