Les 9: DOM aanpassen
Home ›JavaScript-track ›Les 9

✏️ DOM aanpassen

⏱ Geschatte leestijd: 20 minuten · 7 stappen

In de vorige les heb je geleerd hoe je DOM-elementen selecteert. Nu ga je ze ook daadwerkelijk aanpassen: klassen toevoegen of verwijderen, stijlen instellen en nieuwe elementen aanmaken en toevoegen aan de pagina.

1 classList.add(), .remove() en .toggle()

Wat betekent dit?

Met classList beheer je de CSS-klassen van een element.
add() — voegt een klasse toe.
remove() — verwijdert een klasse.
toggle() — voegt toe als de klasse er niet is, verwijdert hem als hij er al is.

classList voorbeelden
const box = document.getElementById('box');

// Klasse toevoegen
box.classList.add('actief');

// Klasse verwijderen
box.classList.remove('actief');

// Toggle: voeg toe of verwijder
box.classList.toggle('actief');

// Controleren of klasse aanwezig is
if (box.classList.contains('actief')) {
  console.log('De box is actief!');
}

💡 Tip: definieer stijlen in CSS en wissel klassen met JavaScript. Zo houd je opmaak en logica gescheiden.

2 Inline stijlen met element.style

Wat betekent dit?

Je kunt ook rechtstreeks inline CSS-stijlen instellen via element.style. CSS-eigenschappen met een koppelteken worden camelCase in JavaScript: background-color wordt backgroundColor.

Inline stijlen instellen
const titel = document.querySelector('h1');

titel.style.color = 'red';
titel.style.fontSize = '32px';
titel.style.backgroundColor = '#f0f0f0';
titel.style.padding = '10px';

// Stijl verwijderen (terugzetten naar CSS-standaard)
titel.style.color = '';

💡 Voorkeur: gebruik classList voor herbruikbare stijlen en gebruik element.style alleen als je een waarde dynamisch berekent (bijv. een breedte in pixels op basis van een variabele).

3 Elementen aanmaken: createElement() en appendChild()

Wat betekent dit?

Met document.createElement('tag') maak je een nieuw element aan. Het bestaat dan alleen in het geheugen — je moet het daarna toevoegen aan de pagina met appendChild().

Nieuw element aanmaken en toevoegen
const lijst = document.getElementById('lijst');

// 1. Maak een nieuw element aan
const li = document.createElement('li');

// 2. Geef het inhoud
li.textContent = 'Nieuw item';

// 3. Voeg het toe aan de pagina
lijst.appendChild(li);

// Alles in één keer
const nieuwItem = document.createElement('li');
nieuwItem.textContent = 'Nog een item';
nieuwItem.classList.add('item-stijl');
lijst.appendChild(nieuwItem);

4 Elementen verwijderen: element.remove()

Wat betekent dit?

Met element.remove() verwijder je een element direct uit het DOM. Je kunt ook innerHTML = '' gebruiken om alle kinderen van een element in één keer te wissen.

Elementen verwijderen
// Eén element verwijderen
const el = document.getElementById('oud-item');
el.remove();

// Alle kinderen verwijderen
const lijst = document.getElementById('lijst');
lijst.innerHTML = '';

// Element verwijderen bij klik erop
item.addEventListener('click', () => {
  item.remove();
});

💡 innerHTML = '' is snel maar overschrijft alles. remove() verwijdert één specifiek element — gebruik wat past bij je situatie.

5 Oefening 1: Klasse togglen

Opdracht:

Er is al een knop en een div#box in de starter. Schrijf JavaScript: als de knop wordt geklikt, toggle je de klasse actief op de box. De klasse actief geeft de box een gele achtergrond.

✓ Gebruik classList.toggle

✓ Gebruik addEventListener voor het klikken

✓ De box wisselt van kleur bij elke klik

editor
Live preview

6 Oefening 2: Items toevoegen aan een lijst

Opdracht:

Er is een <ul id="lijst">, een invoerveld en een knop. Als de knop wordt geklikt, maak je een nieuw <li>-element aan met de waarde uit het invoerveld en voeg je dat toe aan de lijst.

✓ Gebruik createElement

✓ Gebruik appendChild

✓ Lees de waarde van het invoerveld met .value

editor
Live preview

7 Eindopdracht: Todo lijst

Bouw een interactieve todo lijst:

✓ Klik op "Toevoegen" om een nieuw item aan de lijst toe te voegen

✓ Klik op een item in de lijst om het te verwijderen

✓ Klik op "Alles wissen" om de volledige lijst leeg te maken

✓ Gebruik createElement en appendChild

✓ Gebruik addEventListener en remove() of innerHTML = ''

editor
Live preview
📄 Volledig voorbeeld: todo.html 
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Todo lijst</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    li { cursor: pointer; padding: 4px; }
    li:hover { text-decoration: line-through; color: red; }
  </style>
</head>
<body>
  <h1>Todo lijst</h1>
  <input id="invoer" type="text" placeholder="Nieuw item...">
  <button id="toevoegen">Toevoegen</button>
  <button id="wissen">Alles wissen</button>
  <ul id="todo"></ul>

  <script>
    const invoer = document.getElementById('invoer');
    const todo = document.getElementById('todo');

    document.getElementById('toevoegen').addEventListener('click', () => {
      if (invoer.value.trim() === '') return;
      const li = document.createElement('li');
      li.textContent = invoer.value;
      li.addEventListener('click', () => li.remove());
      todo.appendChild(li);
      invoer.value = '';
    });

    document.getElementById('wissen').addEventListener('click', () => {
      todo.innerHTML = '';
    });
  </script>
</body>
</html>
← Les 8 Les 10 →