Introducción a la Programación Multimedial DOM Document Object Model
¿Qué es el DOM? Es el árbol de elementos que componen la página web, organizados jerárquicamente entre nodos que tienen una relación de padres - hijos. Por ejemplo, un <div> puede ser hijo del <body>, y a su vez padre de un <p>.
¿Por qué nos interesa saber sobre DOM? Porque desde Javascript podemos manipular el dom. Es decir, podemos agregar, modificar y eliminar nodos desde código javascript sin editar el código HTML. Podemos hacer que suceda automáticamente al cargar la página, al pasar una cantidad de segundos, o al momento que el usuario realiza un evento (click, mouseover, etc).
Para manipular el DOM Definir el evento que realizará el cambio. Acceder a el / los elementos deseados. Aplicar la acción requerida.
Ejemplo #1 Realizar un programa que permita mostrar un mensaje determinado al hacer click en un botón.
Ejemplo #1
Ejercicio #1 Realizar un programa que tenga dos botones. El primer botón deberá mostrar un mensaje que diga “Hola chicos”. El segundo botón deberá mostrar un mensaje que diga “Chau chicos”.
¿Qué es un evento? Hasta ahora conocíamos una única forma de programar: secuencial. Ahora también contaremos con la programación por eventos. En vez de ejecutarse el código automáticamente de arriba hacia abajo (secuencial), los eventos se ejecutarán sólo cuando intervenga el usuario.
1. Definir un evento onload Se dispara automáticamente cuando se terminó de cargar la ventana. Aplica sólo al elemento window. onclick Se dispara al hacer clic sobre un elemento determinado. Aplica a todos los elementos. onmouseover Se dispara cuando el mouse pasa encima de un elemento. Aplica a todos los elementos. onmouseout Se dispara cuando el mouse sale de encima de un elemento. Aplica a todos los elementos. onchange Se dispara cuando cambia el texto de un campo. Aplica sólo a input, select y textarea. Ver más eventos en http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html
2. Acceder a los elementos getElementById Accede a un único elemento del DOM. getElementsByTagName Accede a una colección (array) de elementos que contengan ese tag. getElementsByClassName Accede al array de elementos que contengan esa clase.
Ejemplo #2 Realizar un programa que permita reemplazar una imagen por otra.
Ejemplo #2
Ejercicio #2 Realizar un programa que tenga una imagen y un botón. El botón me deberá permitir alternar entre dos imágenes dadas al hacerle click.
Ejercicio #3 Realizar un programa que tenga una imagen y dos botones. Cada botón debería mostrar una imagen distinta al hacer click. No se puede usar getElementbyId para acceder a los elementos.
3. Aplicar acciones sobre elementos style.display Sirve para ocultar (“none”) o mostrar (“block”) un elemento. innerHTML Modifica el contenido del elemento por el nuevo que le indique. setAttribute Modifica el atributo de un elemento. className Modifica la clase de un elemento por la nueva que le indique. Ver más en https://developer.mozilla.org/es/docs/Web/API/Element
Temporizadores setTimeout Sirve para ejecutar una función al completar una cantidad definida de segundos. setInterval Sirve para ejecutar una función continuamente cada cierta cantidad definida de segundos.
Ejemplo #3