【JS】DOMのクラス名付替えを1行で行う方法

JavaScript

こんにちは、しきゆらです。
今回は、DOMに対してクラス名を外す処理とつける処理を1行でやる方法を知ったのでメモしておきます。

DOMへのクラス追加・削除

DOMに対してクラスを追加・削除するには、それぞれadd/removeというメソッドが定義されています。
これらを使えば、動的にDOMのクラスを変更することができます。

しかし、例えば既存のAというクラスを外してBというクラスをつける
という処理を書く場合、素直に書くならば以下のように2行になってしまいます。

dom.classList.remove('A');
dom.classList.add('B');

 

クラスの追加・削除をまとめる

上記のようなコードを1行で書くには、以下の方法で行えます。

dom.classList.replace('A', 'B');

replace( oldClass, newClass )
既存のクラスを新しいクラスで置き換えます。
Element.classList – MDN

MDNを眺めていて見つけました。
知っていなくてもなんとかなるけど、知っているとコードがスッキリするやつですね。
知っているつもりでも、改めて見てみると知らないことがあるので、時々見てみるといいかもしれません。

 

まとめ

今回は、DOMの追加・削除を1行で行うメソッドを発見したのでメモしてみました。
置き換えるという方法でできる処理は1行で書けるので、知っていると少しだけコードが短くなると思います。

 

今回は、ここまで。
おわり

Posted by しきゆら