What is the DOMContentLoaded event?

This is an event that occurs when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Main difference from the load event:

• DOMContentLoaded: Fires when the DOM structure is ready.
• load: Fires only after all page resources (images, CSS, scripts, if not async/defer) have fully loaded.

Usage:

// Add a listener for the DOMContentLoaded event
document.addEventListener('DOMContentLoaded', () => {
  // Code to execute after the DOM is fully loaded and parsed
  console.log('DOM fully loaded and parsed.');
});

This event is often used to execute JavaScript code that manipulates the DOM, as there is no need to wait for all external resources to load.