DOM manipuleren met JavaScript: elementen selecteren en wijzigen

Het DOM (Document Object Model) stelt de elementen van een HTML-document voor als objecten die je met de programmeertaal JavaScript kunt bewerken. Dat betekent dat je, wanneer JavaScript gebruikt om met het DOM te werken, HTML-elementen op je webpagina kunt toevoegen, verwijderen, wijzigen of uitlezen.

In dit voorbeeld gebruiken we de volgende HTML om de verschillende technieken voor DOM-manipulatie te laten zien:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Nodes uit het DOM selecteren

Om het DOM te bewerken moet je eerst de nodes selecteren die je wilt wijzigen. JavaScript kent daarvoor verschillende methoden:

• Met de methode document.getElementById selecteer je een node op zijn ID. Om bijvoorbeeld de div met de ID “container” te pakken, gebruik je deze syntaxis:

const container = document.getElementById('container');

• Met de methode document.getElementsByClassName selecteer je een lijst met nodes op hun klasse. Om bijvoorbeeld alle li-elementen met de klasse “item” te pakken, gebruik je deze syntaxis:

const items = document.getElementsByClassName('item');

• Met de methode document.querySelector selecteer je de eerste node die aan een CSS-selector voldoet. Om bijvoorbeeld het eerste li-element van de lijst te pakken, gebruik je deze syntaxis:

const firstItem = document.querySelector('li');

Deze methode geeft het eerste element terug dat aan de opgegeven selector voldoet. Wordt er niets gevonden, dan is de teruggegeven waarde null.

• De methode document.querySelectorAll werkt hetzelfde, maar geeft een lijst terug met alle nodes die aan de opgegeven selector voldoen. Bijvoorbeeld:

const items = document.querySelectorAll('li');

Met deze methode selecteer je meerdere elementen tegelijk. Je loopt ze door met een lus, zoals je in het hoofdstuk over lussen hebt gezien.

Heb je dat hoofdstuk over lussen gevolgd, dan kun je de methode forEach van het Array-object combineren met document.querySelectorAll('li'). Zo gaat dat:

document.querySelectorAll('li').forEach(function(li) {
  // Code die voor elk li-element wordt uitgevoerd
});

Deze code selecteert alle li-elementen op de pagina en voert voor elk daarvan een stuk code uit. Wil je bijvoorbeeld aan elk li-element een “click”-event hangen, dan gebruik je dit:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

In plaats van de anonieme functie kun je ook een arrow function gebruiken:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Je kunt elementen ook selecteren via hun id of hun klasse, net zoals je dat in CSS doet. Bijvoorbeeld:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

Met deze syntaxis selecteer je elementen op hun id of hun klasse. Handig wanneer je juist die elementen in JavaScript wilt bewerken.

Er bestaan nog veel meer manieren om elementen in het DOM te selecteren met JavaScript, maar deze methoden worden vaak gebruikt en vormen een goede basis om te beginnen.

Het DOM wijzigen met JavaScript

Nu je verschillende methoden hebt gezien om een bepaald element in je HTML op te halen, kijken we hoe je het DOM wijzigt: inhoud toevoegen, tekst aanpassen of CSS instellen.

HTML toevoegen met JavaScript

Met de eigenschap innerHTML voeg je HTML toe aan een element in het DOM. Bijvoorbeeld om een item aan het einde van de lijst te zetten:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Een nieuw element toevoegen met JavaScript

Je kunt ook een nieuw element maken en het met de methode appendChild aan een element in het DOM hangen. Bijvoorbeeld om een item aan het einde van de lijst te zetten:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

De tekst van een element wijzigen met JavaScript

De tekst van een element wijzig je met de eigenschap textContent. Bijvoorbeeld om de tekst van de titel te veranderen:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

CSS toevoegen aan een element met JavaScript

Je voegt CSS toe aan een element in het DOM met de eigenschap style. Bijvoorbeeld om de paragraaf rood en vet te maken:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

Je kunt daarvoor ook de methode setAttribute gebruiken. Bijvoorbeeld:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Conclusie

Er zijn nog veel meer manieren om de CSS van een element in het DOM met JavaScript te bewerken, maar deze methoden worden vaak gebruikt en vormen een goede basis om te beginnen.

Naast de CSS kun je ook andere kanten van een element in het DOM aanpassen: de HTML- of tekstinhoud, of er events aan hangen bij een klik, wanneer de muis over de tekst gaat, enzovoort.

In het volgende hoofdstuk kijken we naar events in JavaScript en hoe je ermee werkt.