素のJavascript(VanillaJSとか言われる事もありますね…)を使って
Webサイト上の要素を操作するケースがかなり増えてきました。
デザイナーやフロントエンドの領域でよく使う簡単な用例としては、たとえば
querySelector() や getElementById() などを用いて対象の要素を取得、
classList.add() を使用して、classを付与したりするケースが多いかと思います。
逆も然りで、
classList.remove() を使用して、classを削除したい場合もよくあるケースかと思います。
そんな時、操作したいclassがひとつではなく複数存在した場合。
たとえば、ひとつの要素に付与されているclassを、一括で全て削除してしまいたい場合。あると思います。
今回はそんな時に使える方法について、記事を書いていきたいと思います。
myTarget.classList.remove(…myTarget.classList); とすると全削除が可能
…もう、書きたい事としては、完全に見出しの通りではあるのですが。
たとえばWebサイトに、以下のようなhtmlが存在しているとします。
<div class="content-wrapper">
<p class="content-item is-text is-bold has-decoration has-animation">
この要素のclassを操作したい
</p>
</div>
↑ご覧の通り、2行目のp要素は複数のclassを持っているのですが、
これを一括で削除したい。そんな要望があったとします。
そんなケースで使えるのが、次の書き方になります。
const myTarget = document.querySelector('.content-item');
myTarget.classList.remove(...myTarget.classList);
↑1行目で対象の要素を querySelector() を使って取得。
2行目でclassの一括削除を行なっています。
「スプレッド構文」(…) を使って一括操作ができる
myTarget.classList.remove(...myTarget.classList);
↑こちらの
(...myTarget.classList);
この部分。
これは「スプレッド構文」と呼ばれるもので、
オブジェクトや配列内の全ての要素を操作する際に使える便利な構文です。
… に続いて対象を指定する事で、
対象が持っている配列やオブジェクト内の全要素に対して操作を行うことができます。
上の例ではclassの操作を行なっていますが、
もっと簡単な例を挙げてみます。
const osushi = ['maguro', 'hamachi', 'inada', 'buri', 'toro']; const gochisou = ['hamburg', 'steak', ...oshushi, 'beer']; // ↑配列 gochisou に、別の配列 osushi の要素全てを、任意の位置で追加可能
↑このように「スプレッド構文」を使用して書くことで、
「配列に別の配列の要素を一括で追加」することが、
push(), splice(), など配列操作系の記述を使わずとも
シンプルに実現できたりする、というわけです。
スプレッド構文に関する詳しい解説など
Web制作者界隈ではおなじみ、Mozillaが運営するMDNの次のページに、
スプレッド構文に関しての更に詳しい解説が掲載されています。一読をおすすめします。
スプレッド構文 – JavaScript | MDN
この記事のまとめ
今回は、素のJavascriptを使って、
要素が持っているclassを一括で削除する方法について記事を書きました。
このスプレッド構文(…)、地味なようでいて
覚えておくと様々な場面で応用が効く構文です。
個人的にはとても気に入っている記法になります。
例によって、IEでは動作しない構文ではありますが
いよいよ今年の6月で、IEのサポート期限が完全に満了を迎えることが
公式で決まっていますので、それ以降であれば
実案件でも普通に使っていける記法になるかと思います。
もちろん、IEの考慮をしなくても良い案件であれば
現時点でも使えますので、覚えておくと役に立つかと思います。
なお今回は「要素のclassを一括削除する方法」をご紹介しましたが、
それができるということは、その逆もまた可能ということです。
今後この記事の続きを書くとすれば、今回の逆バージョンとして、
「要素に複数のclassを一括付与する方法」について
書いていきたいと思っています。