【JavaScript】classList は Array 化することで順序削除、一致削除などができる

ちょっとしたアニメーションの実装などのために JavaScript から HTML の class を付け外しすることはあるかと思います。

そのときに利用するのが classList です。

const target = document.querySelector('.target')

target.classList.add('foo')

target.classList.remove('foo')

developer.mozilla.org

ただし、classList で利用できるメソッドは少なく、index での削除、特定文字列にマッチするクラス名の削除、などはできません。（2023/02/18 現在）

そこで、Array 化することで、柔軟な対応ができます。

const target = document.querySelector('.target')

// 2番目の要素を削除
const class1 = Array.from(target.classList)[1]
target.classList.remove(class1) 

// 特定の文字列にマッチする要素を削除
const class2 = Array.from(target.classList).find(a => a.includes('bar'))
target.classList.remove(class2)

developer.mozilla.org

ただし、n番目の要素がなかった場合、マッチする要素がなかった場合、なども例外ケースも考慮する必要があるかもですが…。

css modules を利用していて、クラス名が動的に生成される、みたいな時に便利かもですね。