Qu'est-ce que l'événement DOMContentLoaded?

Cet événement se produit lorsque le document HTML initial est complètement chargé et analysé, sans attendre le chargement des feuilles de style, images et sous-frames.

La principale différence avec l'événement load:

• DOMContentLoaded : Se déclenche lorsque la structure du DOM est prête.
• load : Se déclenche uniquement après le chargement complet de toutes les ressources de la page (images, CSS, scripts, si ils ne sont pas async/defer).

Utilisation:

// Ajoutons un écouteur pour l'événement DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  // Code à exécuter après que le DOM soit complètement chargé et analysé
  console.log('DOM entièrement chargé et analysé.');
});

Cet événement est souvent utilisé pour exécuter du code JavaScript qui manipule le DOM, car il n'est pas nécessaire d'attendre le chargement de toutes les ressources externes.