JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで特定の要素にクラスを追加する方法をわかりやすく解説

はじめに

JavaScriptでDOM要素にクラスを追加するには、まず document.querySelector や document.getElementById などのメソッドを使って対象の要素を取得し、その後に classList.add() を呼び出してクラスを追加します。

例として、次のようなHTMLがあるとします。

サンプルHTML

<!DOCTYPE html>
<html>
   <head></head>
  <body>
    <p id="para">これはテキストです</p>
  </body>
</html>

この <p> 要素は、主に以下の2つの方法で取得できます。

方法1: document.querySelector を使う

const myPara = document.querySelector('#para');

querySelector はCSSセレクターの記法で要素を指定できるため、idだけでなくclass名や属性なども柔軟に検索できます。なお、元のコードのように [0] を付ける必要はありません。querySelector は最初に一致した単一の要素を直接返すためです（複数の要素を取得したい場合は querySelectorAll を使用します）。

方法2: document.getElementById を使う

const myPara = document.getElementById('para');

idが事前に分かっている場合は、この方法が最もシンプルで高速です。

クラスを追加する

取得した要素に対して、classList.add() を使うことでクラスを追加できます。

const myPara = document.getElementById('para');
myPara.classList.add('myClass');

classList.add() は既存のクラスを上書きすることなく新しいクラスを追加するため、安全に利用できます。また、複数のクラスを一度に追加することも可能です。

myPara.classList.add('myClass', 'anotherClass');

classList のその他の便利なメソッド

  • remove(): 指定したクラスを削除します
  • toggle(): クラスの有無に応じて、追加・削除を自動的に切り替えます
  • contains(): 特定のクラスを持っているかどうかを真偽値で返します
  • replace(): 既存のクラスを別のクラスに置き換えます

これらのメソッドを組み合わせることで、ボタンのアクティブ状態の切り替えや表示・非表示の制御など、動的なUI操作を簡単に実装できます。

  1. JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

    JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam

  2. JavaScriptで親要素にCSSクラスを適用・継承する方法をわかりやすく解説

    JavaScriptを使って新しく作成した要素にCSSのスタイル（クラス）を適用したい場合、document.createElement()、classList.add()、そしてappend()を組み合わせることで簡単に実現できます。 基本的な仕組み 処理の流れは以下の3ステップです。 1. document.createElement()： 新しいdiv要素などのHTML要素を動的に生成します。 2. classList.add()： 生成した要素に対して、あらかじめ定義しておいたCSSクラス（.classセレクタ）を追加します。これにより、そのクラスに設定されたスタイルが継承・適用されま