JavaScript: come gestire le classi CSS con le API DOM classList

JavaScript ha una caratteristica che va a colmare un vuoto che esisteva nella gestione delle classi CSS degli elementi. Questa caratteristica sono le API classList.

Consideriamo il seguente elemento HTML:

<div id="test" class="a b c"></div>

Utilizzando le nuove API possiamo scrivere:

const test = document.getElementById( "test" );
console.log( test.classList );
// [ "a", "b", "c" ]

L'output può variare in base al browser, ma ciò che viene restituito è sempre un'istanza della DOMTokenList. Quest'interfaccia dispone di diversi metodi e proprietà per lavorare con le classi:

• add() – aggiunge una classe alla lista
• remove() – rimuove una classe dalla lista
• contains() – verifica se una classe è presente nella lista
• toggle() – aggiunge o rimuove una classe a seconda se sia già presente o meno nella lista
• item() – restituisce una classe nella posizione specificata
• toString() – trasforma la lista in una stringa
• length – restituisce il numero delle classi nella lista
• value – aggiunge metodi o proprietà all'oggetto classList.

Alcuni esempi:

test.classList.add( "d" );
console.log( test.classList ); // [ "a", "b", "c", "d" ]
console.log( test.classList.contains( "k" ) ); // false
console.log( test.classList.item( 0 ) ); // "a"