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

INDEX

getElementByIdとquerySelectorとは？

JavaScriptでHTMLを操作するには、まず対象となる要素を取得する必要があります。

そのためによく使われるのが、getElementById()とquerySelector()です。

どちらもHTML要素を取得するメソッドですが、指定方法や取得できる要素に違いがあります。本記事では、それぞれの特徴と使い分けを初心者向けに解説します。

getElementById()は、指定したIDを持つ要素を取得するメソッドです。

HTMLでは、同じIDは通常1つしか存在しないため、このメソッドは1つの要素を取得します。

// IDが「myElement」の要素を取得
const element = document.getElementById("myElement");

// テキストを変更
element.textContent = "テキストが変更されました！";

この例では、IDがmyElementの要素を取得し、その文字列を変更しています。

querySelector()は、CSSセレクタを使って要素を取得するメソッドです。

IDだけでなく、クラス名やタグ名、属性など、CSSで指定できるセレクタをそのまま利用できます。

// クラス名が「myClass」の最初の要素を取得
const element = document.querySelector(".myClass");

// 文字色を変更
element.style.color = "red";

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

両者の違いをまとめると、次のようになります。

メソッド	指定方法	取得できる要素
`getElementById()`	IDのみ	IDに一致する要素
`querySelector()`	CSSセレクタ	最初に一致した要素

querySelector()は、より柔軟に要素を取得できます。

querySelector()では、次のようなCSSセレクタが利用できます。

このように、CSSを書ける人なら直感的に要素を指定できます。

用途によって使い分けるのがおすすめです。

最近のJavaScriptでは、柔軟に指定できるquerySelector()を利用する場面が増えています。

// ページタイトルを取得
const title = document.getElementById("pageTitle");

// テキストを変更
title.textContent = "新しいページタイトル";

IDが決まっている要素を取得する場合は、このようにシンプルに書けます。

// クラス名でボタンを取得
const button = document.querySelector(".btn-primary");

// 背景色を変更
button.style.backgroundColor = "green";

クラス名を指定して最初のボタンを取得し、背景色を変更しています。

今回紹介した2つのメソッドは、どちらも1つの要素を取得します。

複数の要素を取得したい場合は、querySelectorAll()を使用します。

// すべてのli要素を取得
const items = document.querySelectorAll("li");

console.log(items.length);

querySelectorAll()については、別の記事で詳しく解説します。