DOM y HTML Dinámico. DOM El modelo de objeto de documento (DOM) Interfaz de programación para los documentos HTML y XML Facilita una representación estructurada.

Presentación del tema: "DOM y HTML Dinámico. DOM El modelo de objeto de documento (DOM) Interfaz de programación para los documentos HTML y XML Facilita una representación estructurada."— Transcripción de la presentación:

1 DOM y HTML Dinámico

2 DOM El modelo de objeto de documento (DOM) Interfaz de programación para los documentos HTML y XML Facilita una representación estructurada del documento Define de qué manera los programas pueden acceder a los documentos

3 DOM Da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos Proporciona otras formas de presentar, guardar y manipular un documento Representación orientada a objetos de una página web

4 Acceso a los elementos Cada objeto tiene un nombre Cuando existen más elementos del mismo tipo se organizan en un vector document.miImagen document.images[0] document.images[“miImageno”] document.images.miImagen

5 Acceso a los elementos Mediante funciones var logua = document.getElementById("miImagen"); var misImagenes = document.getElementsByTagName("img");

6 Cambiar los estilos Podemos cambiar el estilo de un elemento accediendo a las propiedades mediante style var elDiv; elDiv = document.getElementById("primero"); elDiv.style.color="blue"; elDiv.style.fontSize="20px";

7 Cambiar los estilos También podemos cambiar toda la hoja de estilo document.getElementById('estilo').href=arquivo;

8 Eventos Para generar DHTML Interacción con el usuario – onClick- onFocus – onLoad- onBlur – onMouseOver- onChange – onMouseOut- onMouseDown – onSubmit- onMouseUp – onSelect- onDblClick

9 Eventos Javascript no intrusivo – El código en el bloque de script elemento.evento = hazAlgo window.onload = function() { alert("ya está cargada");... }

10 Formularios Comprobar datos de formularios window.onload = function() { var form = document.getElementById("formulario"); form.onsubmit = function () { return test() }; }}...

11 Formularios Acceso a las propiedades de los campos var cNom=document.getElementById("nombre"); if (cNom.value=="") { error("Introduzca un nombre") return(false); }...