JavaScript querySelectorで劇的変化!10選の使い方とサンプルコード

JavaScript_querySelector_使い方_サンプルコードJS
この記事は約11分で読めます。

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

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

はじめに

この記事を読めば、JavaScript querySelectorで劇的に変わる10選の使い方とサンプルコードが身につきます。

初心者でも分かりやすい徹底解説で、すぐに活用できるスキルを身につけていきましょう!

●JavaScript querySelectorとは

querySelectorは、JavaScriptでHTML要素を簡単に取得できるメソッドです。

CSSセレクタを使って要素を指定し、ページ内から該当する要素を取得することができます。

これにより、要素のスタイルや内容の変更、イベントの追加など、さまざまな操作が可能になります。

○querySelectorの基本

querySelectorを使う場合、次のような構文を使用します。

const element = document.querySelector('CSSセレクタ');

ここで、’CSSセレクタ’には、取得したい要素を指定するCSSセレクタを記述します。

そして、該当する最初の要素が取得され、elementに代入されます。

●querySelectorの使い方

ここでは、querySelectorの基本的な使い方を4つのサンプルコードで紹介します。

○サンプルコード1:HTML要素の取得

このコードでは、id属性が’sample’の要素を取得しています。

この例では、idが’sample’の要素を取得し、elementに代入しています。

const element = document.querySelector('#sample');
console.log(element);

○サンプルコード2:複数の要素を取得する

このコードでは、querySelectorAllを使って、すべての’class-name’クラスを持つ要素を取得しています。

この例では、すべての’class-name’クラスを持つ要素を取得し、elementsに代入しています。

const elements = document.querySelectorAll('.class-name');
console.log(elements);

○サンプルコード3:クリックイベントの追加

このコードでは、idが’button’の要素を取得し、クリックイベントを追加しています。

この例では、idが’button’の要素を取得し、クリックされたときに’Hello, World!’と表示するイベントを追加しています。

const button = document.querySelector('#button');
button.addEventListener('click', () => {
  alert('Hello, World!');
});

○サンプルコード4:要素の属性値を操作する

このコードでは、idが’text’の要素を取得し、テキスト内容を変更しています。

この例では、idが’text’の要素を取得し、そのテキスト内容を’こんにちは、世界!’に変更しています。

const text = document.querySelector('#text');
text.textContent = 'こんにちは、世界!';

●querySelectorの応用例

querySelectorを活用することで、さまざまなWebページの機能を実装できます。

ここでは、応用例として6つのサンプルコードを紹介します。

○サンプルコード5:タブ切り替え機能の実装

このコードでは、タブをクリックすると、対応するコンテンツが表示されるタブ切り替え機能を実装しています。

この例では、タブ要素とコンテンツ要素をquerySelectorを使って取得し、クリックイベントを設定しています。

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    contents.forEach(c => c.classList.remove('active'));
    contents[index].classList.add('active');
  });
});

○サンプルコード6:フィルタリング機能の実装

このコードでは、リストから特定の条件に一致するアイテムを表示するフィルタリング機能を実装しています。

この例では、フィルタ条件を入力するテキストボックスと、リストアイテムを取得して、条件に一致するアイテムを表示しています。

const filterInput = document.querySelector('#filter-input');
const listItems = document.querySelectorAll('.list-item');

filterInput.addEventListener('input', () => {
  const filterValue = filterInput.value.toLowerCase();
  listItems.forEach(item => {
    const itemText = item.textContent.toLowerCase();
    if (itemText.includes(filterValue)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
});

○サンプルコード7:アコーディオンメニューの実装

このコードでは、クリックするとコンテンツが開閉するアコーディオンメニューを実装しています。

この例では、メニュータイトル要素とコンテンツ要素を取得し、クリックイベントでコンテンツを開閉させています。

const accordionTitles = document.querySelectorAll('.accordion-title');

accordionTitles.forEach(title => {
  title.addEventListener('click', () => {
    const content = title.nextElementSibling;
    content.classList.toggle('active');
  });
});

○サンプルコード8:モーダルウィンドウの実装

このコードでは、ボタンをクリックした際にモーダルウィンドウが表示され、閉じるボタンを押すとウィンドウが消える機能を実現しています。

この例では、モーダルウィンドウを表示するボタンと、閉じるボタンをquerySelectorを使って取得し、クリックイベントを設定してモーダルウィンドウを開閉しています。

const openModalButton = document.querySelector('#open-modal');
const closeModalButton = document.querySelector('#close-modal');
const modal = document.querySelector('.modal');

openModalButton.addEventListener('click', () => {
  modal.classList.add('show');
});

closeModalButton.addEventListener('click', () => {
  modal.classList.remove('show');
});

○サンプルコード9:ドラッグアンドドロップ機能の実装

このコードでは、要素をドラッグして別の場所にドロップできる機能を実装しています。

この例では、ドラッグ対象の要素とドロップエリアの要素を取得し、ドラッグイベントとドロップイベントを設定しています。

const draggable = document.querySelector('.draggable');
const dropzone = document.querySelector('.dropzone');

draggable.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', draggable.id);
});

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  dropzone.appendChild(draggedElement);
});

○サンプルコード10:簡単なスライダーの実装

このコードでは、簡単な画像スライダーを実装しています。

この例では、スライダー内の画像要素を取得し、次へボタンと前へボタンのクリックイベントで画像を切り替えています。

const sliderImages = document.querySelectorAll('.slider-image');
const prevButton = document.querySelector('#prev');
const nextButton = document.querySelector('#next');
let currentIndex = 0;

function showImage(index) {
  sliderImages.forEach(image => image.classList.remove('active'));
  sliderImages[index].classList.add('active');
}

prevButton.addEventListener('click', () => {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = sliderImages.length - 1;
  }
  showImage(currentIndex);
});

nextButton.addEventListener('click', () => {
  currentIndex++;
  if (currentIndex >= sliderImages.length) {
    currentIndex = 0;
  }
  showImage(currentIndex);
});

●注意点と対処法

querySelectorを使用する際には、いくつかの注意点があります。

ここでは、それらの注意点と対処法を説明します。

  1. 要素が存在しない場合のエラー

    querySelectorで存在しない要素を取得しようとすると、nullが返されます。
    この状態で操作を行おうとすると、エラーが発生します。
    対処法としては、要素がnullでないことを確認してから操作を行うようにしましょう。
const element = document.querySelector('#nonexistent-element');
if (element !== null) {
  // 要素が存在する場合の処理
} else {
  console.log('要素が見つかりませんでした。');
}
  1. 複数の要素を取得する際の注意

    querySelectorAllで複数の要素を取得した場合、NodeListというオブジェクトが返されます。
    NodeListはArrayと似ていますが、Arrayのメソッドが一部使えないため、注意が必要です。
    対処法としては、Array.from()を使ってNodeListをArrayに変換してから操作を行うと便利です。
const elements = document.querySelectorAll('.example');
const elementsArray = Array.from(elements);
elementsArray.forEach(element => {
  // 各要素に対する処理
});

●カスタマイズ方法

querySelectorを使ったコードは、状況に応じて簡単にカスタマイズすることができます。

例えば、クラス名やID名を変更したい場合は、querySelectorの引数を変更するだけで対応できます。

また、イベントリスナーを追加することで、さまざまなイベントに対応した処理を実装できます。

まとめ

本記事では、querySelectorの基本的な使い方と応用例を紹介しました。

また、注意点と対処法、カスタマイズ方法についても説明しました。

querySelectorを使うことで、JavaScriptでHTML要素を効率的に操作することができます。

ぜひ、実際の開発や学習に活用してみてください。