JavaScript
Wat is de DOM en hoe manipuleer je hem met JavaScript?
De DOM is de boomstructuur van HTML elementen. JavaScript kan de DOM manipuleren.
DOM selection
document.getElementById('id') document.querySelector('.class') document.querySelectorAll('selector') - returns NodeList document.getElementsByClassName - returns HTMLCollection
DOM manipulation
element.textContent = tekst veranderen element.innerHTML = HTML veranderen element.classList.add/remove/toggle element.setAttribute('attr', value) element.addEventListener('event', callback)
Code Voorbeelden
JAVASCRIPTDOM manipulation
// Selection
const button = document.getElementById('myButton');
const elements = document.querySelectorAll('.item');
// Manipulation
button.textContent = 'Klik mij!';
button.innerHTML = '<strong>Klik</strong> mij!';
// Classes
button.classList.add('active');
button.classList.remove('disabled');
button.classList.toggle('highlight');
// Attributes
button.setAttribute('data-id', '123');
const id = button.getAttribute('data-id');
// Events
button.addEventListener('click', () => {
console.log('Geklikt!');
});
button.addEventListener('hover', function(e) {
this.style.color = 'red';
});
// Create/remove
const div = document.createElement('div');
div.textContent = 'Nieuw element';
document.body.appendChild(div);
// Remove
div.remove();💡 Praktijk Tips
querySelector is flexibel en modern, gebruik die. Vermijd innerHTML met user input (XSS risk).
Relevante trefwoorden
DOMquerySelectoraddEventListener