Tot nu toe schreef je JavaScript los van HTML. Vanaf deze les ga je de twee koppelen via de DOM. Je leert hoe je HTML-elementen vanuit JavaScript kunt vinden en uitlezen — de eerste stap naar echte interactieve webpagina's.
1 Wat is de DOM?
Document Object Model
De DOM (Document Object Model) is een boomstructuur die de browser aanmaakt op basis van je HTML. Elk HTML-element wordt een node in die boom. JavaScript kan deze boom lezen en aanpassen — zo wordt een statische pagina interactief.
<!-- HTML die je schrijft -->
<html>
<body>
<h1 id="titel">Hallo wereld</h1>
<p id="intro">Welkom!</p>
</body>
</html>
<!--
DOM-boom:
document
└── html
└── body
├── h1#titel → "Hallo wereld"
└── p#intro → "Welkom!"
-->
Via het globale object document heb je toegang tot de hele boom. Alle DOM-methoden beginnen met document..
2 getElementById en querySelector
De twee belangrijkste selectiemethoden
getElementById('id') geeft één element terug op basis van zijn id-attribuut. querySelector('css-selector') is flexibeler: je gebruikt dezelfde CSS-selectors als in een stylesheet. querySelectorAll geeft een NodeList terug van alle matches.
// Op ID — snel, direct
const titel = document.getElementById('titel');
// querySelector — CSS-selector syntax
const titel2 = document.querySelector('#titel'); // id
const eerste = document.querySelector('p'); // eerste <p>
const actief = document.querySelector('.actief'); // klasse
const input = document.querySelector('input[type="text"]'); // attribuut
// querySelectorAll — alle matches als NodeList
const alleparagrafen = document.querySelectorAll('p');
console.log(alleparagrafen.length); // aantal <p>-elementen
// NodeList itereren
alleparagrafen.forEach(p => console.log(p.textContent));
💡 Tip: Als een element niet bestaat, geeft getElementById en querySelector null terug. Controleer altijd of het element gevonden is voordat je er iets mee doet, anders krijg je een fout.
3 textContent vs innerHTML
Tekst uitlezen en aanpassen
.textContent leest of schrijft de puur tekstuele inhoud van een element — HTML-tags worden niet verwerkt, wat het veilig maakt. .innerHTML leest of schrijft de HTML-inhoud inclusief tags, maar wees voorzichtig: het verwerkt HTML, waardoor een aanvaller schadelijke scripts kan injecteren (XSS) als je gebruikersinvoer gebruikt.
const el = document.querySelector('#bericht');
// textContent — veilig, alleen tekst
console.log(el.textContent); // leest de tekst
el.textContent = 'Nieuwe tekst'; // schrijft tekst
// HTML-tags worden als gewone tekst behandeld:
el.textContent = '<b>vet</b>'; // toont letterlijk <b>vet</b>
// innerHTML — verwerkt HTML
el.innerHTML = '<b>vet</b>'; // toont: vet (vetgedrukt)
// GEVAAR — gebruik dit NOOIT met gebruikersinvoer:
// el.innerHTML = gebruikerInput; // XSS-risico!4 getAttribute en setAttribute
Met .getAttribute() lees je elk HTML-attribuut uit, met .setAttribute() stel je het in. Dit werkt voor elk attribuut: href, src, class, data-*, enzovoort.
const link = document.querySelector('a');
// Lezen
console.log(link.getAttribute('href')); // bijv. "https://example.com"
// Schrijven
link.setAttribute('href', 'https://mbo-sd.com');
link.setAttribute('target', '_blank');
// Verwijderen
link.removeAttribute('target');
// Handige kortere notatie voor standaard-attributen
const img = document.querySelector('img');
console.log(img.src); // zelfde als getAttribute('src')
img.alt = 'Nieuw alt'; // zelfde als setAttribute('alt', ...)5 Oefening 1: Elementen uitlezen
Opdracht:
De pagina bevat drie elementen met IDs. Schrijf JavaScript om de textContent van elk element te loggen in de console.
✓ Gebruik getElementById of querySelector
✓ Log de textContent van alle drie elementen
6 Oefening 2: Inhoud wijzigen
Opdracht:
De pagina heeft een koptekst en een alinea. Schrijf JavaScript om de textContent van de koptekst te wijzigen naar "Gewijzigde Titel" en de alinea naar "Dit is gewijzigd door JavaScript."
✓ Gebruik .textContent = om de inhoud te overschrijven
✓ De nieuwe teksten moeten exact overeenkomen
7 Eindopdracht: Samenvatting samenstellen
Combineer alles:
De pagina heeft elementen met id="naam", id="leeftijd", id="stad" en id="samenvatting". Lees de tekstinhoud van de eerste drie uit en stel de samenvatting in met een template literal die alle drie combineert.
✓ Minstens 3 aanroepen van querySelector of getElementById
✓ Template literal met backticks gebruikt
✓ .textContent = gebruikt om samenvatting in te stellen
Uitstekend! Je kunt nu HTML-elementen selecteren en uitlezen vanuit JavaScript.
In les 9 leer je de DOM ook aanpassen: stijlen, klassen en nieuwe elementen toevoegen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>DOM selecteren</title>
</head>
<body>
<h1 id="titel">Hallo wereld</h1>
<p class="intro">Eerste alinea.</p>
<p class="intro">Tweede alinea.</p>
<a href="https://example.com">Link</a>
<p id="naam">Lena</p>
<p id="leeftijd">22</p>
<p id="stad">Utrecht</p>
<p id="samenvatting"></p>
<script>
// getElementById
const titel = document.getElementById('titel');
console.log(titel.textContent); // Hallo wereld
// querySelector
const eersteIntro = document.querySelector('.intro');
console.log(eersteIntro.textContent); // Eerste alinea.
// querySelectorAll
const alleIntros = document.querySelectorAll('.intro');
alleIntros.forEach(p => console.log(p.textContent));
// getAttribute / setAttribute
const link = document.querySelector('a');
console.log(link.getAttribute('href'));
link.setAttribute('target', '_blank');
// textContent schrijven
const naam = document.getElementById('naam').textContent;
const leeftijd = document.getElementById('leeftijd').textContent;
const stad = document.getElementById('stad').textContent;
const samen = document.getElementById('samenvatting');
samen.textContent = `${naam} is ${leeftijd} jaar en woont in ${stad}.`;
</script>
</body>
</html>