【JavaScript】HTML要素のclass属性を操作できるclassNameメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptでHTML要素のclass属性に対して様々な操作ができるclassNameメソッドについて

  • classNameメソッドとは
  • classNameメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

classNameメソッドとは

classNameメソッドとは、HTML要素のclass属性に対して

  • 取得
  • 変更
  • 追加

ができるメソッドです。

classNameメソッドの基本的な書き方は

です。
HTML要素を取得するには、getElementByIdメソッドを使う、というやり方があります。
詳しくはこちらの記事をご参考ください。

次の章からサンプルプログラムをまじえて

  1. classNameメソッドでHTML要素のclass属性を取得
  2. classNameメソッドでHTML要素のclass属性を変更
  3. classNameメソッドでHTML要素のclass属性を追加

と解説します。
解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
classNameメソッドを解説するディレクトリ構成

classNameメソッドでHTML要素のclass属性を取得

classNameメソッドでHTML要素のclass属性を取得について解説します。

取得するには

と書けば、sampleに指定したHTML要素のclassを取得することができます。

サンプルプログラムではclassNameメソッドでdivタグのclassを取得して、アラートで表示させます。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、【ボタン】を押します。
JavaScriptのclassNameメソッドの実行確認

指定したidがsampleのclass属性を取得できていることが確認できました。
JavaScriptのclassNameメソッドの実行確認

classNameメソッドでHTML要素のclass属性を変更

classNameメソッドでHTML要素のclass属性を変更について解説します。

変更するには

と書けば、指定したHTML要素のclassを変更することができます。

注意点として、すでに設定してあるclassの上書きをして変更する、という点です。
設定してあるものに追加する、ということはできないので、ご注意ください。

サンプルプログラムではclassNameメソッドでdivタグのclassを変更させます。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
divタグのclassは【hogehoge】であることを確認しました。
【ボタン】を押します。
JavaScriptのclassNameメソッドの実行確認

指定したidがsampleのclass属性を【hogehoge】から【piyo】に変更できたことが確認できました。
JavaScriptのclassNameメソッドの実行確認

classNameメソッドでHTML要素のclass属性を追加

classNameメソッドでHTML要素のclass属性を追加について解説します。

追加は変更のときと同じく

と書けば、指定したHTML要素のclassを追加することができます。

サンプルプログラムではclassNameメソッドでdivタグにclass属性を追加します。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
divタグのclassは指定されていないことを確認しました。
【ボタン】を押します。
JavaScriptのclassNameメソッドの実行確認

指定したidがsampleのclass属性に【fuga】が追加できたことが確認できました。
JavaScriptのclassNameメソッドの実行確認

まとめ:classNameメソッドを使ってみよう

以上がJavaScriptのclassNameメソッドについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました