Evento DOMContentLoaded

Autor: | Última modificación: 11 de noviembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post: ,

¿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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!