読み込み中...

JavaScriptで驚くほど簡単！querySelectorとgetElementByIdの使い方10選

JavaScriptで簡単にDOM操作ができるquerySelectorとgetElementByIdの使い方を解説 JS
2023.05.07
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webページを作成していると、JavaScriptでDOM要素を操作することがよくあります。

そんな時に役立つのが、querySelectorとgetElementByIdです。

この記事を読めば、JavaScriptでDOM要素を簡単に操作する方法を学ぶことができるようになります。

●querySelectorとgetElementByIdの基本

○querySelectorとは

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

引数に指定したセレクタに一致する最初の要素を返します。

複数の要素を取得したい場合は、querySelectorAllメソッドを使用します。

○getElementByIdとは

getElementByIdは、指定したID属性値を持つ要素を取得するためのメソッドです。

ID属性値はページ内で一意であるため、取得できる要素は1つだけです。

●querySelectorとgetElementByIdの使い方

○サンプルコード1：querySelectorで要素を取得する

このコードでは、querySelectorを使ってid属性が”title”の要素を取得しています。

この例では、該当する要素のテキストをコンソールに出力しています。

const titleElement = document.querySelector('#title');
console.log(titleElement.textContent);

○サンプルコード2：getElementByIdで要素を取得する

このコードでは、getElementByIdを使ってid属性が”title”の要素を取得しています。

この例では、該当する要素のテキストをコンソールに出力しています。

const titleElement = document.getElementById('title');
console.log(titleElement.textContent);

○サンプルコード3：querySelectorAllで複数の要素を取得する

このコードでは、querySelectorAllを使ってclass属性が”box”の要素をすべて取得しています。

この例では、取得した要素の数をコンソールに出力しています。

const boxElements = document.querySelectorAll('.box');
console.log(boxElements.length);

○サンプルコード4：querySelectorでクラス名を持つ要素を取得する

このコードでは、querySelectorを使ってclass属性が”box”の要素を取得しています。

この例では、該当する要素のテキストをコンソールに出力しています。

const boxElement = document.querySelector('.box');
console.log(boxElement.textContent);

○サンプルコード5：querySelectorで属性値を持つ要素を取得する

このコードでは、querySelectorを使ってdata-index属性が”1″の要素を取得しています。

この例では、該当する要素のテキストをコンソールに出力しています。

const indexElement = document.querySelector('[data-index="1"]');
console.log(indexElement.textContent);

○サンプルコード6：querySelectorで複数条件を満たす要素を取得する

このコードでは、querySelectorを使って、class属性が”item”でかつdata-type属性が”special”の要素を取得しています。

この例では、該当する要素のテキストをコンソールに出力しています。

const specialItem = document.querySelector('.item[data-type="special"]');
console.log(specialItem.textContent);

○サンプルコード7：getElementByIdで要素のプロパティを操作する

このコードでは、getElementByIdを使ってid属性が”title”の要素を取得し、要素のテキストを変更しています。

const titleElement = document.getElementById('title');
titleElement.textContent = '変更されたタイトル';

○サンプルコード8：querySelectorで要素のプロパティを操作する

このコードでは、querySelectorを使ってid属性が”title”の要素を取得し、要素のテキストを変更しています。

const titleElement = document.querySelector('#title');
titleElement.textContent = '変更されたタイトル';

○サンプルコード9：querySelectorで要素のスタイルを操作する

このコードでは、querySelectorを使ってclass属性が”box”の要素を取得し、要素の背景色を変更しています。

const boxElement = document.querySelector('.box');
boxElement.style.backgroundColor = 'red';

○サンプルコード10：querySelectorでイベントリスナーを設定する

このコードでは、querySelectorを使ってid属性が”button”の要素を取得し、ボタンがクリックされたときにアラートを表示するイベントリスナーを設定しています。

const buttonElement = document.querySelector('#button');
buttonElement.addEventListener('click', () => {
  alert('ボタンがクリックされました');
});

●querySelectorとgetElementByIdの注意点

○querySelectorの限界

querySelectorは非常に便利ですが、CSSセレクタによって表現できない要素の検索ができません。

その場合は、他のDOM操作メソッドを組み合わせて使用する必要があります。

○getElementByIdの制約

getElementByIdは、ID属性値を指定して要素を取得しますが、ID属性値はページ内で一意である必要があります。

ID属性値が重複している場合は、正しく動作しないことがあります。

○ブラウザの互換性

querySelectorとgetElementByIdは、現代の主要なブラウザではほぼサポートされています。

ただし、非常に古いブラウザではサポートされていないことがあるため、対応が必要な場合は別の方法を検討してください。

●querySelectorとgetElementByIdの応用例

○サンプルコード11：querySelectorを使ったタブメニュー

このコードでは、querySelectorを使ってタブメニューを作成しています。

タブをクリックすると、対応するコンテンツが表示されます。

<div class="tabs">
  <button class="tab" data-target="content1">タブ1</button>
  <button class="tab" data-target="content2">タブ2</button>
</div>
<div class="contents">
  <div id="content1" class="content">コンテンツ1</div>
  <div id="content2" class="content" hidden>コンテンツ2</div>
</div>

<script>
  const tabs = document.querySelectorAll('.tab');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const targetId = tab.dataset.target;
      const targetContent = document.getElementById(targetId);
      
      document.querySelectorAll('.content').forEach(content => {
        content.hidden = true;
      });
      
      targetContent.hidden = false;
    });
  });
</script>

○サンプルコード12：getElementByIdを使った簡易的なアコーディオンメニュー

このコードでは、getElementByIdを使って簡易的なアコーディオンメニューを作成しています。

タイトルをクリックすると、対応するコンテンツが開閉します。

<div>
  <h3 id="accordion1">タイトル1</h3>
  <div class="content">コンテンツ1</div>
</div>
<div>
  <h3 id="accordion2">タイトル2</h3>
  <div class="content" hidden>コンテンツ2</div>
</div>

<script>
  const accordion1 = document.getElementById('accordion1');
  const accordion2 = document.getElementById('accordion2');

  accordion1.addEventListener('click', () => {
    const content = accordion1.nextElementSibling;
    content.hidden = !content.hidden;
  });

  accordion2.addEventListener('click', () => {
    const content = accordion2.nextElementSibling;
    content.hidden = !content.hidden;
  });
</script>

○サンプルコード13：querySelectorでフォームの入力値を取得する

このコードでは、querySelectorを使ってフォームの入力値を取得し、コンソールに出力しています。

<form id="sample-form">
  <input type="text" id="input-text">
  <button type="submit">送信</button>
</form>

<script>
  const form = document.querySelector('#sample-form');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const inputText = document.querySelector('#input-text').value;
    console.log(inputText);
  });
</script>

●カスタマイズ方法

○querySelectorとgetElementByIdを組み合わせる

querySelectorとgetElementByIdはそれぞれの特徴を活かして組み合わせることができます。

例えば、親要素をgetElementByIdで取得し、子要素をquerySelectorで取得することができます。

○querySelectorとgetElementByIdを組み合わせる

querySelectorとgetElementByIdは、それぞれの特徴を活かして組み合わせることができます。

例えば、親要素をgetElementByIdで取得し、子要素をquerySelectorで取得する方法があります。

このコードでは、親要素をgetElementByIdで取得し、その子要素であるpタグをquerySelectorで取得して、テキストを変更しています。

<div id="parent">
  <p>子要素</p>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = parent.querySelector('p');
  child.textContent = '新しい子要素';
</script>

○querySelectorでカスタムデータ属性を操作する

HTML5では、カスタムデータ属性を使って要素に任意の情報を付与することができます。

querySelectorを使って、カスタムデータ属性を操作することもできます。

この例では、ボタンをクリックすると、カスタムデータ属性をもとにアラートが表示されます。

<button class="alert-button" data-alert-message="ボタン1をクリックしました。">ボタン1</button>
<button class="alert-button" data-alert-message="ボタン2をクリックしました。">ボタン2</button>

<script>
  const buttons = document.querySelectorAll('.alert-button');
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const message = button.dataset.alertMessage;
      alert(message);
    });
  });
</script>

まとめ

querySelectorとgetElementByIdは、それぞれ異なる特徴を持ち、使い分けが重要です。

本記事では、querySelectorとgetElementByIdの基本的な使い方と注意点、応用例やカスタマイズ方法を解説しました。

どちらのメソッドも適切に使い分けることで、効率的なJavaScriptコードを書くことができます。

今後の開発でぜひ活用してみてください。