TEMA 9 – Eventos y DOM

TEMA 9: Eventos y DOM

Tabla de contenidos

DOM

¿Qué es?

El DOM (Document Object Model) es una representación del documento HTML en memoria y permite a JavaScript acceder y modificar el contenido y el estilo de la página.

Acceso al DOM

Para acceder a elementos del DOM, se pueden utilizar funciones como getElementById, getElementsByTagName o querySelector, entre otras.

9Gz56UBPhVHo RL4T4BbpoPu9ljP ERd5G1pnUU5p1l78sVKHGBy9eux8hvy5B99eeYMVGVykTCxPikkuMC6FrZEupoQhfw8KD4xmEODtIQUTm95HkEE4GrX8y54mgKEJaMrh njRyrakYrgp72 b5zBlRLSyZvhRiWxPaCvSk tsEvAGdZ plM57ltC7kUV=s2048

Modificar el DOM

Una vez se tiene acceso a un elemento del DOM, se pueden modificar sus propiedades para cambiar el contenido o el estilo de la página.

Modificar el DOM: innerHTML

innerHTML → permite obtener y cambiar el contenido del elemento.

Nb hC 3qIYLbRYbIiEqFMxFQ NKwj4nC 6cVwED0eEgOWCp3SbDcNYb8WKMSjLeFCgF0i12RJ mvoZl5eG2MGCSTHzXoIwc3MP0R ZdmQysPWvhi9 kXFkxoaU6BozXcP ZORUYBM91m AzN41YrqVg95CEPt4jiqeskHrq8pG541wFkaXURbsrE1GOHZc0O=s2048

Modificar el DOM: style.color

Style.color → permite cambiar el color del texto del elemento.

q3QXDdh906vFhNp3mnsdW 05tBne5F0FB PVkGfgxTyqp2EHdj bB8ko KsLlRifV0UhMM6 jebGtjSO1cj6tAwWRTs9ZqrtRIUHaQ 3hQYTGLqKoRvf45e32bDM6 XNksrMtNzJqGy9pxGj9HWKydXQyBTXIF2tHlv jewBirfJYhiRzvMGnMi0WqDr5Xt=s2048

Eventos

¿Qué son?

Los eventos en JavaScript son acciones que ocurren en el navegador, como hacer clic en un botón, cargar una página, pasar el mouse por encima de un elemento, etc. Los eventos se pueden manejar en JavaScript para ejecutar código específico cuando ocurren.

Manejar Eventos

Para manejar un evento, se puede utilizar el método addEventListener de un elemento del DOM. 

Por ejemplo, para manejar el evento de hacer clic en un botón, se puede utilizar el siguiente código:

TDyCZIMp2sAcVtpJqungl33RA6fHr0xWSJpJWuQvavPRNvu6dA0PAID P5nkML1F1NKanyGAwlZruswpvwL6 CvMvKrdJW3Y YIlT1ZHUcR6NzLW9x1AMVa6QGBAXdwY02Beyvg NLVULHUInyhIPb

También es posible pasar una función ya definida en lugar de una función anónima.

lAHoqiaQ1Nfzg1jt9JkTEidPLAm9hzolkey2lyJWtrA2WBEpcyTx3EInDWGskx0n5CuoPq6Atc21 PeugAVKM9UV3 lr7fnLFVc4covHDiVOvYwZQf4doMXLSLuDeJ68zQVO0d3esgr0e8SxeIuKFKuoIekdreosCCJD CjkchLx223QupVa 6154SbvZDD=s2048

Eventos principales

«Click« → se dispara cuando se hace clic en un elemento.

«Mouseover« → se dispara cuando el mouse pasa por encima de un elemento.

«Mouseout« → se dispara cuando el mouse sale de un elemento.

«Submit« → se dispara cuando se envía un formulario.

«Change« → se dispara cuando se cambia el valor de un elemento de formulario.

Ventajas de Sumérgete en JavaScript

Metodologia

Metodología con mucha práctica

La teoría está bien, y es por eso que el curso cuenta con +12h en vídeo, pero lo realmente importante es la práctica y aquí hay mucha práctica.

Profesionales

Profesores Profesionales

Curso diseñado y realizado por profesores profesionales con experiencia tanto en el sector de la programación como en el educativo.

De por vida

Acceso de por vida

Compra el curso y ten acceso a él siempre que lo necesites. Obtendrás todas las actualizaciones.

certificado

Certificado de finalización

Realizando el Proyecto Final obtendrás un certificado de finalización. El certificado cuenta con un código de verificación, para que las empresas puedan comprobar que realmente sabes JavaScript.

Comunidad

Comunidad de Discord

Conecta con los profesores y otros estudiantes a través de la comunidad de Discord. Haz nuevos amigos, contactos en el sector y pide ayuda a tus profesores, todo desde una sola plataforma.

garantia 14 dias

Pruébalo 14 días

No tienes que decidir ahora. Puedes acceder al curso y tomar una decisión en las próximas dos semanas. Si no te gusta el contenido o te das cuenta que el curso no es para tí, solo tienes que avisarnos y te devolvemos el 100% de tu dinero.

Testimonios de algunos estudiantes

Ellos ya han aprendido JavaScript

OFERTAS POR BLACK FRIDAY

Invierte en tu

Educación

Hasta el 30/11

18749

Deja de poner excusas, y dale un impulso a tu carrera laboral

SÚMERGETE EN JAVASCRIPT

Únete a

Disponible en Euros (€) y Dólares ($), para que aprender JavaScript no sea un impedimento