¿Conoces el evento DOMContentLoaded? El Document Object Model, también conocido como DOM por sus siglas en inglés, es un concepto que nos permite acceder a los elementos HTML de un proyecto desde código JavaScript. En este post, te enseñaremos qué es y cómo funciona el evento DOMContentLoaded, fundamental para conocer el estado del DOM desde JavaScript.
¿Qué es el evento DOMContentLoaded?
El evento DOMContentLoaded es una palabra reservada que nos permite conocer el momento en el que todos los elementos del DOM, es decir, los elementos HTML de un proyecto, están cargados. En este sentido, DOMContentLoaded funciona de manera similar al evento click o cualquier evento, pues nos permite conocer el momento en el que sucede algo en nuestro proyecto.
Para conocer más sobre el evento DOMContentLoaded, te recomendamos leer el artículo window: DOMContentLoaded event en la página oficial de Mozilla Developer Network. Para conocer el listado completo de los eventos disponibles en un proyecto web, te recomendamos revisar el listado referencia de eventos en la MDN, donde además podrás ver quién es el responsable de mandar el evento. Recuerda que aquellos en rojo representan eventos deprecados que deberás comprobar antes de usar.
¿Cómo funciona el evento DOMContentLoaded?
Al ser un evento como cualquier otro, el evento DOMContentLoaded puede utilizarse dentro del comando addEventListener, que recibe como primer parámetro un evento y como segundo, una función callback que define la reacción a dicho evento.
Entonces, podremos usar el evento DOMContentLoaded de la siguiente manera. Ten presente que aquí el segundo parámetro, sea lo que sea que haga, solo se ejecutará una vez todos los elementos del DOM estén cargados.
document.addEventListener («DOMContentLoaded», ( ) => {
const formElement = document.querySelector («form»);
const signupController = new SignupController (formElement);
});
Con las líneas de código anteriores, hemos definido que todo a partir de la coma en el paréntesis se ejecutará solo después de que cargue el DOM. Es decir, después de que nuestra página haya cargado bien.
Para conocer algunos escenarios en los que es es útil el evento DOMContentLoaded, te recomendamos leer nuestro post sobre cómo asegurar que un elemento esté en el DOM.
¿Qué sigue?
Ahora que sabes qué es y cómo funciona el evento DOMContentLoaded, ¡te invitamos a aprender sobre otros eventos, métodos y propiedades que nos ofrece el DOM! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a desarrollar con herramientas y lenguajes de programación fundamentales para el desarrollo web como JavaScript, HTML, CSS y JSX. ¡No te lo pierdas y solicita información!
