Wat is het DOMContentLoaded-evenement?

Dit evenement vindt plaats wanneer het initiële HTML-document volledig is geladen en geparseerd, zonder te wachten op het laden van stylesheets, afbeeldingen en subframes.

Het belangrijkste verschil met het load-evenement:

• DOMContentLoaded: Wordt geactiveerd wanneer de structuur van de DOM klaar is.
• load: Wordt alleen geactiveerd nadat alle bronnen van de pagina (afbeeldingen, CSS, scripts, indien niet async/defer) volledig zijn geladen.

Gebruik:

// Voeg een listener toe voor het DOMContentLoaded-evenement
document.addEventListener('DOMContentLoaded', () => {
  // Code die moet worden uitgevoerd nadat de DOM volledig is geladen en geparseerd
  console.log('DOM volledig geladen en geparseerd.');
});

Dit evenement wordt vaak gebruikt om JavaScript-code uit te voeren die de DOM manipuleert, omdat het niet nodig is om te wachten op het laden van alle externe bronnen.