これまでに様々なDOM操作について学習してきましたが、今回はclass属性を操作する方法を学びます。
JavaScriptのDOM操作によって、class属性の値を追加、変更、削除することができます。
目次
class属性の操作の種類
「class属性の操作」には、次のような種類があります。
- class属性を取得する
- class属性を作成・追加する
- class属性のON/OFFを切り替える
- class属性を削除する
いずれの操作においても、まずは対象のDOM要素を取得し、その要素のclass属性に対して操作する流れになります。
よって、querySelectorおよびquerySelectorAllは引き続き活躍します。
class属性を取得する
class属性を取得する方法は次の2種類あります。
- DOM要素.className
- 対象要素に指定されているclassの値を文字列型で取得する
- DOM要素.classList
どのような動作になるか、それぞれサンプルプログラムで確認してみます。
classNameプロパティの使用例
<!-- ここから上は省略 -->
<body>
<p class="my-class1 my-class2 my-class3"></p>
<script>
let className = document.querySelector("p").className;
console.log(className);
</script>
</body>
</html>> my-class1 my-class2 my-class3👆このように、設定されているclass属性の値がすべて表示されます。
ただし、複数に見えても1つの文字列であることには注意してください。
1つ1つを切り出して使いたい場合には、splitメソッドを使用して配列に変換する等の処理が必要です。
classListプロパティの使用例
<!-- ここから上は省略 -->
<body>
<p class="my-class1 my-class2 my-class3"></p>
<script>
let classList = document.querySelector("p").classList;
console.log(classList);
</script>
</body>
</html>▼ DOMTokenList(3) ['my-class1', 'my-class2', 'my-class3', value: 'my-class1 my-class2 my-class3']
0: "my-class1"
1: "my-class2"
2: "my-class3"
length: 3
value: "my-class1 my-class2 my-class3"👆ご覧の通り、先ほどのclassNameを使用した結果よりも複雑な内容が表示されています。
classListプロパティを使用すると、DOMTokenList型の値が取得されます。
通常の配列（Array）と異なるのは、最後に文字列としてのvalueが加えられている点です。
さらに、lengthが3であることから、そのvalueはリストの要素としては見なされていないことが分かります。
検証用のプログラムを作成して確認してみましょう。
<!-- ここから上は省略 -->
<body>
<p class="my-class1 my-class2 my-class3"></p>
<script>
let classList = document.querySelector("p").classList;
// classListのlength分ループする
for (let i = 0; i < classList.length; i ++) {
console.log(classList[i]);
}
// for…ofでのループも試す
for (item of classList) {
console.log(item);
}
</script>
</body>
</html>> my-class1
> my-class2
> my-class3
> my-class1
> my-class2
> my-class3いずれのループの場合も、👆このようにそれぞれ3つの値のみ表示されています。
class属性を作成・追加する
class属性を作成する場合にも、classNameとclassListを使用します。
classNameプロパティの使用例
<!-- ここから上は省略 -->
<body>
<!-- 👇class属性は付与されていない -->
<p>テスト</p>
<script>
document.querySelector("p").className = "my-class";
</script>
</body>
</html>-- ここより上は省略 --
<body>
<p class="my-class">テスト</p>
-- ここより下は省略 --複数の値を追加することもできます。
<!-- ここから上は省略 -->
<body>
<!-- 👇class属性は付与されていない -->
<p>テスト</p>
<script>
// 文字列内にスペース区切りで複数の値を指定する
document.querySelector("p").className = "my-class1 myclass2";
</script>
</body>
</html>-- ここより上は省略 --
<body>
<p class="my-class1 my-class2">テスト</p>
-- ここより下は省略 --classListプロパティの使用例
classListプロパティでclassの値を追加するには、addメソッドを使用します。
<!-- ここから上は省略 -->
<body>
<!-- 👇class属性は付与されていない -->
<p>テスト</p>
<script>
document.querySelector("p").classList.add("my-class");
</script>
</body>
</html>-- ここより上は省略 --
<body>
<p class="my-class">テスト</p>
-- ここより下は省略 --こちらも、addメソッドの引数に配列（Array）を渡すことで、複数の値を追加することができます。
<!-- ここから上は省略 -->
<body>
<!-- 👇class属性は付与されていない -->
<p>テスト</p>
<script>
document.querySelector("p").classList.add(["my-class1", "myclass2"]);
</script>
</body>
</html>-- ここより上は省略 --
<body>
<p class="my-class1 my-class2">テスト</p>
-- ここより下は省略 --両プロパティの使用上の注意
classNameとclassListプロパティは、要素のclass属性を作成・追加することができますが、大きな違いがあります。
- classNameにclassの値を代入する
- 元々class属性に値が存在していた場合、代入した値で上書きされます。
つまり、元々あった値と同じ値を指定しない限り、既存の値は消滅します。
- 元々class属性に値が存在していた場合、代入した値で上書きされます。
- classListのaddメソッドを使用する
- 既存のclass属性の値に、メソッドの引数で指定した値を追加します。
class属性のON/OFFを切り替える
Webサイトで、何かの条件によってある要素の表示/非表示を切り替えたい場合があります。
そんな時に使えるのがtoggleメソッドです。
toggleメソッドは指定したclassの値のON/OFFを切り替えます。
具体的には、その値が既に存在していれば削除され、存在していない場合は追加されます。
toggleメソッドは、classListプロパティから使用できます。
以下のような仕様で、ページを作成してみましょう。
「切り替え」ボタンをクリックすると、「テストエリア」と書かれたpタグの表示と非表示が切り替わる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<!-- 以下のCSSを定義 -->
<style>
/* hideクラスを持つ要素は非表示 */
.hide {
display: none;
}
</style>
</head>
<body>
<p>テストエリア</p>
<button>切り替え</button>
<script>
// ボタン要素を取得
let button = document.querySelector("button");
// ボタン要素にイベントリスナーを追加
button.addEventListener("click", function() {
// p 要素のclass属性の「hide」をトグル（切り替え）する
document.querySelector("p").classList.toggle("hide");
});
</script>
</body>
</html>今回のサンプルでは、HTMLタグを一切の省略なしで掲載していますので、ぜひ実際に作成いただき動作を確認してみてください。
class属性を削除する
class属性を削除する場合にも、classNameとclassListともに使用可能です。
classNameを使う場合には対象の要素のclassNameに空文字を代入し、classListを使う場合にはremoveメソッドの引数に削除する値を指定します。
classListプロパティの使用例
<!-- ここから上は省略 -->
<body>
<!-- my-class2を削除するサンプル -->
<p class="my-class1 my-class2 my-class3"></p>
<script>
document.querySelector("p").classList.remove("my-class2");
</script>
</body>
</html>-- ここより上は省略 --
<body>
<p class="my-class1 my-class3"></p>
-- ここより下は省略 --👆ブラウザを開き、デベロッパーツールの「要素」タブを確認すると、「my-class2」の値が削除されていることが分かります。
まとめ
- DOM要素のclass属性を操作するには、classNameとclassListプロパティを主に使用する
- classNameに値を代入すると、元の値は上書きされる
- classListは、メソッドを使用して追加、削除を行うことができる
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。
最後までお読みいただき、ありがとうございます。
コメント