Element class-list

Classlist attribute

Als je een element hebt opgehaald met querySelector of querySelectorAll kan je van een element alle classes tonen met de .classList attribute.

<div class="my-class other-class something-else">
  Dit is tekst in een div
</div>

const myDiv = document.querySelector('.my-class');
console.log(myDiv.classList);

Methoden (functies) van de DOMTokenList

Maar je hoeft niet alles langs te lopen en te controleren, er zijn een aantal functies om je leven wat makkelijker te maken :-) #blijei.

.add()

Met de .add() methode kan je een class naam toevoegen aan een element.
myDiv.classList.add('new-class')
Op deze manier wordt de class met de naam new-class toevevoegd.

.remove()

Het weghalen van een class doe je weer met de .remove() methode.
myDiv.classList.remove('new-class')
Op deze manier wordt de class met de naam new-class weggehaald.
LET OP: Als de class NIET in de classList staat is dit niet erg, het geeft geen foutmelding, je hoeft hier dus niet op te controleren.

.toggle()

Met de .toggle() kan je een class toevoegen of weghalen. Als de class naam al op het element zit wordt deze weggehaald. Als die er nog niet op zit, wordt deze er aan toegevoegd.
myDiv.classList.toggle('new-class')
Dit is handig als je bijvoorbeeld een kleur wilt veranderen of een popup gemaakt hebt die je wilt verbergen of juist wilt tonen.

.contains()

Soms wil je weten of een element een bepaalde class heeft, je kan dan de .contains() gebruiken. Dit heeft alleen zin als je dit (logischerwijs) in een if-statement gebruikt of opvangt in een variabele om deze later te gebruiken.
De .contains() geeft een boolean terug, de waarde is true als het element de gekozen classname bevat en false als het deze niet bevalt.

const myDiv = document.querySelector('.my-class');
const elementContainsClass = myDiv.classList.contains('my-class');
if (elementContainsClass) {
  alert('De DIV heeft de class my-class');
} else {
  alert('De DIV bevat NIET de class my-class');
}