HTML dinámico: DOM (Document(

Transcripción

1 Departamto de Lguajes escuela técnica superior de ingiería informática HTML dinámico: DOM (Documt Grupo de Ingiería a del Software Noviembre 2006 Versión original: Amador Durán y David Bavides (octubre 2005) Última revisión: Pablo Fernandez (Noviembre 2006); Reestructuración y ampación de contido. Tiempo: 2h el 9. Modificar el BOM vs DOM location window navigator documt Grupo de Ingiería del Software 1 1

2 el 9. Modificar el Qué es DOM? Psado para acceder a documtos XML y HTML Estándar del W3C ( ) También n conocido como W3CDOM Tres niveles: level 1, level 2, level 3 Cada navegador tie una versión n del DOM A partir de la versión n 6 de IE (Tridt( Tridt) ) y los navegadores basados Gecko (Mozilla, Firefox) soportan W3CDOM Tridt Gecko KHTML Presto icab L Yes 7.0 Yes L2 Minor Major Major Major Major L3 No Minor Minor Minor Minor Grupo de Ingiería del Software 2 el 9. Modificar el El DOM documt Mu Primeros Pasta Ensalada Segundos Lomo Flamquin head body (html) title h1 Primeros ul Mu Cafeta Mu Pasta Ensalada documt head body h1 ul title <html> <html> <head> <head> <title>mu <title>mu Cafeta</title> Cafeta</title> </head> </head> <body> <body> <h1>mu <h1>mu </h1> 11-06</h1> Primeros Primeros <ul <ul> ul> < <>Pasta</> >Pasta</ >Pasta</> < <>Ensalada</> >Ensalada</ </> </ul </ul> ul> Segundos Segundos <ul <ul> ul> < <>Lomo</> >Lomo</ </> < <>Flamquin</> >Flamquin</ </> </ul </ul> ul> </body> </body> </html> </html> Grupo de Ingiería del Software 3 2

3 el 9. Modificar el Nodos DOM documt head body (html) title h1 Primeros ul Mu Cafeta Mu Pasta Ensalada Elemtos body h1 Texto Mu Primeros Grupo de Ingiería del Software 4 el 9. Modificar el Tipos de Nodo Elemtos Correspond a una etiqueta HMTL Atributos Permit acceder a los atributos de una etiqueta. Texto <div id MiDiv >DOM es esfácil fácil</div> Atributo Elemto Represtan cadas. Texto div id MiDiv DOM es fácil Grupo de Ingiería del Software 5 3

4 el 9. Modificar el Elemtos tagname (SOLO LECTURA) Metodos Contie el nombre de la etiqueta del elemto getattribute(n) Devuelve el atributo con nombre n setattribute(n,v) Modifica el atributo con nombre n dandole el valor v <img <img src homer.jpg src homer.jpg /> homer.jpg /> type" type"text/javascript"> "text/javascript"> <! <! // // // // imag imag contie contie el el objeto objeto del del elemto elemto alert(imag.tagname); alert(imag.tagname); imag.setattribute( src imag.setattribute( src, bart.jpg ); src, bart.jpg ); // Grupo de Ingiería del Software 6 IMG el 9. Modificar el Recorrido el El array childnodes permite acceder a los nodos hijos de un elemto. El objeto documt.body proporciona acceso directo al cuerpo del documto documt body h1 ul Mu Pasta elemto type" type"text/javascript"> "text/javascript"> e1 e1 documt.body.childnodes[0]; documt.body.childnodes[0]; root root documt.body; documt.body; e2 e2 root.childnodes[1]. root.childnodes[1].childnodes[0]; [1].childNodes[0]; sta sta root.childnodes[1]; root.childnodes[1]; sta.childnodes[1]. sta.childnodes[1].childnodes[0]; [1].childNodes[0]; // subelem1 subelem2 subelem3 elemto.childnodes[0]; elemto.childnodes[1]; elemto.childnodes[2]; Ensalada Grupo de Ingiería del Software 7 4

5 el 9. Modificar el Buscar elemtos el Temos dos formas: Mediante el nombre de la etiqueta getelemtsbytagname(tagname) type" type"text/javascript"> "text/javascript"> images images documt.getelemtsbytagname( img documt.getelemtsbytagname( img ); img ); primeraimag primeraimag images[0]; images[0]; // Mediante el idtificador getelemtbyid(id) type" type"text/javascript"> "text/javascript"> var div var div documt.getelemtbyid( divprincipal documt.getelemtbyid( divprincipal ); divprincipal ); // Grupo de Ingiería del Software 8 el 9. Modificar el Buscar elemtos el (ejemplos) <html> <html> <head> <head> <title>mu <title>mu Cafeta</title> Cafeta</title> </head> </head> <body> <body> <h1>mu <h1>mu </h1> 11-06</h1> <div <div id primeros id primeros > primeros > Primeros Primeros <ul> <ul> < <>Pasta</> >Pasta</ >Pasta</> < <>Ensalada</> >Ensalada</ </> </ul ul> </ul> </div> </div> </body> </body> </html> </html> type" type"text/javascript"> "text/javascript"> items items documt.getelemtsbytagname( documt.getelemtsbytagname( ); ); miitem miitem items[1]; items[1]; midiv midiv documt.getelemtbyid( primeros documt.getelemtbyid( primeros ); primeros ); sta sta midiv.getelemtsbytagname( ul midiv.getelemtsbytagname( ul )[0]; ul )[0]; items2 items2 sta.getelemtsbytagname( sta.getelemtsbytagname( ); ); // Grupo de Ingiería del Software 9 5

6 el 9. Modificar el Modificar el DOM Todos los nodos ti una interfaz para alterar la estructura. Para crear nuevos elemtos se utiza el nodo padre (documt( documt). insertbefore replacechild removechild appdchild createelemt createtextnode type" type"text/javascript"> "text/javascript"> nuevonododetexto; nuevonododetexto; nuevonododetexto nuevonododetexto documt.createtextnode("hola documt.createtextnode("hola Cara Cara de de Bola"); Bola"); documt.body.appdchild(nuevonododetexto); documt.body.appdchild(nuevonododetexto); // Grupo de Ingiería del Software 10 el 9. Modificar el (L2) <html <html> <head <head> <title <title>título del del documto</ documto</title> title> </head </head> <body <body> contido contido del del documto documto <marca <marca onevto"código onevto"código JavaScript"> JavaScript"> </marca> </marca> <! <! más más contido contido del del documto documto </body </body> </html </html> Suele Suele ser ser una una llamada llamada a a una una función función previamte previamte declarada declarada un un bloque bloque script script la la sección sección de de head head o o un un archivo archivo externo. externo. Grupo de Ingiería del Software 11 6

7 el 9. Modificar el HTML DOM Es una extsión n al DOM básicob Documt Plugin[] Applet[] Anchor[] Area[] Image[] Link[] Layer[] FileUpload Password Radio Checkbox Hidd Submit Form[] Textarea Text Reset Button Select Options[] Grupo de Ingiería del Software 12 el 9. Modificar el Objetos predefinidos: documt Represta al documto que se está visuazando. bgcolor: valor tero con el código del color de fondo o cada con el color ("#12345", "red") fgcolor: idtifica el color del texto del documto forms: un array contido todos los elemtos form de un documto images: array de imáges del documto lastmodified: es una cada con la fecha de modificación del documto nks: array con todos los laces del documto referrer: cada con la URL del lace desde el que se llegó al documto. title: cada con el título del documto Grupo de Ingiería del Software 13 7

8 el 9. Modificar el Objetos predefinidos: documt Métodos close(): cierra el documto (importante si se ha escrito él) write(srt), writeln(str): modifica el documto ( ojo! writeln no mete ningún salto de línea al mostrarlo el navegador) getelemtbyid(id): devuelve el elemto con el ID proporcionado <img <img id"imgmail" id"imgmail" src"mail.jpg"/> documt.getelemtbyid("imgmail").src "mail2.jpg"; "mail2.jpg"; Grupo de Ingiería del Software 14 el 9. Modificar el Objetos predefinidos: nk Represta a los laces. target: cada con el nombre del target href: cada con el nombre del destino Grupo de Ingiería del Software 15 8

9 el 9. Modificar el Objetos predefinidos: image Represta a las imáges. border: valor tero con el valor de border de la imag (número de pixels con el borde de la imag) complete: valor booleano indicando si se ha cargado la imag tera del servidor src: se refiere al contido de la imag sí Grupo de Ingiería del Software 16 el 9. Modificar el Objetos predefinidos: form Represta a los formularios Las relacionadas con los atributos: action, method, etc. elemts: array con todos los elemtos del formulario (botones, áreas de texto,...) lgth: número de elemtos de un formulario Métodos submit(): hace lo mismo que si se pulsara submit el formulario reset(): resetea el formulario como si se pulsase el botón reset Grupo de Ingiería del Software 17 9

10 el 9. Modificar el Objetos predefinidos: text / textarea Represta a los controles de texto Todas las relacionadas con este tipo de controles como defaultvalue, value: contie el valor de la cada de caracteres del área de texto; por tanto, se puede cambiar mediante JavaScript el valor de un área de texto Métodos focus(): captura el foco sobre la caja de texto select(): selecciona el texto que hay la caja de texto Grupo de Ingiería del Software 18 el 9. Modificar el Objetos predefinidos: checkbox Represta a control de caja de confirmación name: nombre del objeto checked: indica si el objeto ha sido confirmado defaultchecked: indica si el objeto debe aparecer inicialmte como confirmado value: indica el valor asociado a la caja de selección (atributo value) Métodos cck(): lo mismo que si se hiciese cc con el ratón Grupo de Ingiería del Software 19 10

11 el 9. Modificar el Objetos predefinidos: radio Este objeto es diferte al anterior puesto que contie más de una casilla con una sola posible selección. Este objeto es por tanto un array con los elemtos que él aparec. lgth : indica el número de elemtos que lo conti. Cada elemto del array contdrá las siguites propiedades: name: indica el nombre del objeto. checked: indica si el objeto ha sido seleccionado. defaultchecked: indica si el objeto debe aparecer inicialmte como seleccionado. value: indica el valor asociado a la caja de selección (atributo value). Grupo de Ingiería del Software 20 el 9. Modificar el Objetos predefinidos: select Represta a un elemto select. Tie como propiedad un array con las opciones. lgth: indica el número de elemtos que contie options: array con las difertes opciones de la selección, cada una con las siguites propiedades: defaultchecked: indica si el objeto debe aparecer inicialmte como seleccionado index: un valor tero que indica la posición del objeto el array selected: indica si la opción ha sido seleccionada selectedindex: un tero que indica el índice de la posición que ha sido seleccionada. text: cada de caracteres con el texto mostrado la opción selectedindex: un tero que indica el índice de la posición que ha sido seleccionada Grupo de Ingiería del Software 21 11