Modern DOM

Wat ga je leren?

Je leert twee moderne manieren om met de DOM te werken: querySelector als krachtig alternatief voor getElementById, en classList voor netjes met CSS-klassen werken.

Theorie

In eerdere lessen gebruikte je document.getElementById('naam') om elementen op te halen, en element.style.color = 'red' om ze te stijlen. Beide werken, maar zijn beperkt:

• getElementById werkt alleen voor id's — niet voor klassen of tags.
• .style.xxx is inline styling — verspreidt CSS over JS-bestanden, moeilijk te onderhouden.

querySelector — selecteer met CSS-selector

document.querySelector(...) geeft het eerste element dat aan een CSS-selector voldoet. Je gebruikt dezelfde syntax als in CSS:

document.querySelector('#welkom');     // element met id="welkom"
document.querySelector('.kaart');      // eerste element met class="kaart"
document.querySelector('button');      // eerste <button> op de pagina
document.querySelector('.kaart h2');   // h2 binnen .kaart

Wil je álle matchende elementen? Gebruik querySelectorAll:

const knoppen = document.querySelectorAll('button');  // alle knoppen
for (let i = 0; i < knoppen.length; i++) {
  knoppen[i].textContent = 'Klik!';
}

classList — werk netjes met CSS-klassen

In plaats van .style.xxx = '...' definieer je je stijl in CSS, en zet/verwijder je een klasse met JavaScript:

const kaart = document.querySelector('.kaart');

kaart.classList.add('actief');     // voeg klasse toe
kaart.classList.remove('actief');  // verwijder klasse
kaart.classList.toggle('actief');  // toggle: aan als af, af als aan
kaart.classList.contains('actief'); // true/false

In CSS heb je dan twee toestanden:

.kaart {
  background-color: lightgray;
}

.kaart.actief {
  background-color: gold;
  transform: scale(1.1);
}

Toggle de klasse en de CSS doet de rest. Schoner dan veel .style-regels.

Predict

Wat denk je dat dit doet?

document.querySelector('p').textContent = 'Veranderd!';

Met deze HTML:

<p>Eerste</p>
<p>Tweede</p>
<p>Derde</p>

Klik hier voor het antwoord

Alleen de eerste <p> krijgt de tekst "Veranderd!". querySelector stopt bij het eerste match. Voor alle drie zou je querySelectorAll + een loop nodig hebben.

Probeer het zelf!

Editor laden...

Investigate

Experimenteer:

• Vervang toggle door add — wat gebeurt er als je nog eens klikt?
• Verander querySelector('.kaart') naar querySelector('h2') — wat verandert er nu bij de toggle?
• Voeg een tweede .kaart toe in de HTML — toggle dan alleen de eerste of allebei?
• Probeer querySelectorAll('.kaart') met een loop om beide te toggelen.

Modify

Opdracht: Voeg een tweede knop toe die de klasse actief verwijdert (alleen verwijderen, niet togglen).

Tip

Gebruik classList.remove('actief') in een aparte functie. Maak een knop met een eigen onclick.

Antwoord

HTML:

<button onclick="reset()">Reset</button>

script.js:

function reset() {
  document.querySelector('.kaart').classList.remove('actief');
}

Make

Opdracht: Bouw een lijst van drie kaartjes. Klik je op een kaartje, dan krijgt het de klasse geselecteerd (andere kleur). Klik je nog eens, dan verdwijnt de klasse. Gebruik querySelectorAll + een loop om alle kaartjes te koppelen.

Tip

querySelectorAll('.kaart') geeft een lijst terug. Loop erover en zet op elke kaart een onclick die classList.toggle('geselecteerd') op zichzelf aanroept.

Antwoord

HTML:

<div class="kaart">Kaart 1</div>
<div class="kaart">Kaart 2</div>
<div class="kaart">Kaart 3</div>

.kaart {
  padding: 20px;
  margin: 5px;
  background-color: lightgray;
  cursor: pointer;
}

.kaart.geselecteerd {
  background-color: lightgreen;
}

script.js:

const kaarten = document.querySelectorAll('.kaart');

for (let i = 0; i < kaarten.length; i++) {
  kaarten[i].onclick = function() {
    kaarten[i].classList.toggle('geselecteerd');
  };
}

Er gaat iets mis

querySelector geeft null als er niks gevonden wordt

const kaart = document.querySelector('.bestaat-niet');
kaart.classList.add('actief');  // TypeError: Cannot read properties of null

Zo'n foutmelding zie je in de console (F12). Check of het element bestaat voordat je er iets mee doet:

const kaart = document.querySelector('.bestaat-niet');
if (kaart) {
  kaart.classList.add('actief');
}

Vergelijkbaar bij getElementById — die geeft ook null bij een onbekende id.

---

← Arrays