BETA

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

投稿日:2019-03-06
最終更新:2019-03-21

こんにちは、しきゆらです。
今回は、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行で書けるので、知っていると少しだけコードが短くなると思います。

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

頭は記憶リムーバブルデバイス

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう