classList

Wat is classList?

classList is een eigenschap van elk HTML-element. Hiermee kun je CSS-klassen toevoegen, verwijderen, wisselen en controleren via JavaScript.

// Een element ophalen
const knop = document.querySelector('#mijn-knop');

// classList geeft toegang tot de klassen van het element
console.log(knop.classList); // DOMTokenList ['knop', 'primair']

classList.add()

Voegt een of meerdere klassen toe aan een element. Als de klasse al bestaat, wordt hij niet opnieuw toegevoegd.

const element = document.querySelector('#mijn-element');

// Eén klasse toevoegen
element.classList.add('actief');

// Meerdere klassen tegelijk toevoegen
element.classList.add('actief', 'zichtbaar', 'geselecteerd');

Praktisch voorbeeld

// HTML: <button id="laad-knop">Laden</button>
// CSS:  .laden { opacity: 0.5; cursor: wait; }

const knop = document.querySelector('#laad-knop');

knop.addEventListener('click', () => {
  knop.classList.add('laden');
  knop.textContent = 'Even geduld...';
});

classList.remove()

Verwijdert een of meerdere klassen van een element. Als de klasse niet bestaat, gebeurt er niets.

const element = document.querySelector('#mijn-element');

// Eén klasse verwijderen
element.classList.remove('actief');

// Meerdere klassen tegelijk verwijderen
element.classList.remove('actief', 'zichtbaar');

Praktisch voorbeeld

// HTML: <div id="melding" class="fout-melding">Er ging iets mis!</div>
// CSS:  .verborgen { display: none; }

const melding = document.querySelector('#melding');
const sluitKnop = document.querySelector('#sluit');

sluitKnop.addEventListener('click', () => {
  melding.classList.add('verborgen');
});

classList.toggle()

toggle() voegt een klasse toe als die nog niet aanwezig is, of verwijdert hem als die er al wel is. Ideaal voor aan/uit-knoppen.

const element = document.querySelector('#mijn-element');

// Wisselt 'actief': voegt toe als afwezig, verwijdert als aanwezig
element.classList.toggle('actief');

Donkere modus voorbeeld

// HTML: <button id="thema-knop">Donkere modus</button>
// CSS:  body.donker { background: #1a1a1a; color: white; }

const knop = document.querySelector('#thema-knop');

knop.addEventListener('click', () => {
  document.body.classList.toggle('donker');
});

Taak afvinken voorbeeld

// CSS: .afgevinkt { text-decoration: line-through; opacity: 0.5; }

const taken = document.querySelectorAll('.taak');

for (let taak of taken) {
  taak.addEventListener('click', () => {
    taak.classList.toggle('afgevinkt');
  });
}

toggle() met tweede argument

Je kunt een boolean meegeven als tweede argument. true voegt altijd toe, false verwijdert altijd.

const isActief = true;

// Voegt 'actief' toe als isActief true is, verwijdert als false
element.classList.toggle('actief', isActief);

classList.contains()

Controleert of een element een bepaalde klasse heeft. Geeft true of false terug.

const element = document.querySelector('#mijn-element');

if (element.classList.contains('actief')) {
  console.log('Element is actief');
} else {
  console.log('Element is niet actief');
}

Praktisch voorbeeld

const knop = document.querySelector('#toggle-knop');

knop.addEventListener('click', () => {
  if (knop.classList.contains('actief')) {
    knop.textContent = 'Activeer';
    knop.classList.remove('actief');
  } else {
    knop.textContent = 'Deactiveer';
    knop.classList.add('actief');
  }
});

Combinaties

In de praktijk gebruik je classList-methodes vaak samen met event listeners en querySelectorAll.

Actief menu-item bijhouden

// HTML:
// <nav>
//   <a href="#" class="nav-item">Home</a>
//   <a href="#" class="nav-item">Over</a>
//   <a href="#" class="nav-item">Contact</a>
// </nav>

const navItems = document.querySelectorAll('.nav-item');

for (let item of navItems) {
  item.addEventListener('click', () => {
    // Verwijder 'actief' van alle items
    for (let andereItem of navItems) {
      andereItem.classList.remove('actief');
    }
    // Voeg 'actief' toe aan het aangeklikte item
    item.classList.add('actief');
  });
}

Klasse op meerdere elementen tegelijk

const alleKaartjes = document.querySelectorAll('.kaartje');

// Voeg klasse toe aan alle kaartjes
for (let kaartje of alleKaartjes) {
  kaartje.classList.add('zichtbaar');
}

// Verwijder klasse van alle kaartjes
for (let kaartje of alleKaartjes) {
  kaartje.classList.remove('geselecteerd');
}

Compleet voorbeeld — tabs

Dit voorbeeld laat zien hoe je tabs bouwt met classList. Één tab is actief tegelijk.

HTML

<nav>
  <button class="tab actief" data-tab="tab1">Tab 1</button>
  <button class="tab" data-tab="tab2">Tab 2</button>
  <button class="tab" data-tab="tab3">Tab 3</button>
</nav>

<section id="tab1" class="tab-inhoud zichtbaar">Inhoud tab 1</section>
<section id="tab2" class="tab-inhoud">Inhoud tab 2</section>
<section id="tab3" class="tab-inhoud">Inhoud tab 3</section>

CSS (basis)

.tab-inhoud { display: none; }
.tab-inhoud.zichtbaar { display: block; }
.tab.actief { font-weight: bold; border-bottom: 2px solid blue; }

JavaScript

const tabs = document.querySelectorAll('.tab');
const tabInhoud = document.querySelectorAll('.tab-inhoud');

for (let tab of tabs) {
  tab.addEventListener('click', () => {
    // Verwijder 'actief' van alle tabs
    for (let andereTab of tabs) {
      andereTab.classList.remove('actief');
    }

    // Verwijder 'zichtbaar' van alle inhoud
    for (let inhoud of tabInhoud) {
      inhoud.classList.remove('zichtbaar');
    }

    // Voeg 'actief' toe aan de aangeklikte tab
    tab.classList.add('actief');

    // Toon de bijbehorende inhoud
    const doelId = tab.dataset.tab;
    document.querySelector('#' + doelId).classList.add('zichtbaar');
  });
}

Samenvatting