tema 3b: manipulaciÓn de dom · los elementos html y xml, hay muchas más especiales para los...

Curso AJAX Y DOM 2007 Marcos A. San Martín Calera

Septiembre 2007

1

TEMA 3B: MANIPULACIÓN DE DOM

7.- Recorrer un documento DOM XML........................................................................... 2

7.1.- Propiedades para XML – HTML - AMBOS............................................. 2

7.2.- Métodos .............................................................................................................. 5

8.- Recorrer DOM HTML ................................................................................................ 7

Siempre use el DOCTYPE correcto ........................................................................ 7

La importancia de validar el HTML.......................................................................... 8

Accediendo a los elementos.................................................................................... 8

9.- Manipulación de DOM XML / HTML........................................................................ 10

9.1.- Crear nodos ...................................................................................................... 10

9.2.- Eliminar, reemplazar, insertar nodos ................................................................ 12

10.- Manipulación de DOM especifico HTML ............................................................... 14

10.1.- Usando innerHTML......................................................................................... 14

10.2.- Lectura y escritura de los atributos de un elemento ....................................... 14

10.3.- Manipulando los estilos de los elementos ...................................................... 15

10.4.- La interfaz evento (Event) de DOM............................................................... 17

10.5.- Formulario de HTML (HTMLFormElement). ................................................... 21

10.6.- Tablas en HTML (HTMLTableElement) .......................................................... 23

11.- Gestión de errores................................................................................................. 23

12.- BIBLIOGRAFÍA Y REFERENCIAS........................................................................ 25


Septiembre 2007

2

7.- Recorrer un documento DOM XML Recorrer un documento DOM de XML o un documento DOM de HTML se hace recorriendo una estructura jerárquica de nodos. En la copa del árbol se encuentra la propiedad documentElement, que contiene el elemento raíz del documento. A partir de allí, podemos acceder a cualquier elemento o atributo en el documento utilizando las propiedades que se ilustran a continuación. NOTA: Mientras que estas interfaces son generalmente compartidas por la mayoría de los elementos HTML y XML, hay muchas más especiales para los objetos particulares listados en la especificación HTML del DOM —por ejemplo las interfaces del elemento tabla de HTML y elemento formulario de HTML.

7.1.- Propiedades para XML – HTML - AMBOS NOMBRE DESCRIPCIÓN DISPON TIPO

attributes Contiene una matriz con los atributos del nodo. Listado de

nombres

childNodes Contiene una matriz de nodos hijos. Listado de nudos

firstChild Hace referencia al primer hijo directo del nodo. Nudo

lastChild Hace referencia al último hijo del nodo. Nudo

nextSibling Devuelve el nodo que sigue inmediatamente al nodo actual. Nudo

nodeName Devuelve el nombre que cualifica al nodo. Secuencia

nodeType Especifica el tipo de nodo DOM de XML del nodo. Número

nodeValue Contiene el texto asociado con el nodo. Secuencia

ownerDocument Devuelve el elemento raíz del documento. Documento

parentNode Hace referencia al nodo padre del nodo actual. Nudo

previousSibling Devuelve el nodo inmediatamente anterior al nodo actual. Nudo

Text Devuelve el contenido del nodo o el texto concatenado del nodo actual y sus descendientes.

Xml Devuelve el XML del nodo actual y sus hijos como una cadena.


Septiembre 2007

3

Un ejemplo con estas propiedades: XML: <?xml version="1.0" encoding="us-ascii"?> <chat> <frase nombre="pepe" hora="12:00">Hola ¿cómo estás?</frase> <frase nombre="maria" hora="12:01">Muy bien, hoy he estado en la playa </frase> <frase nombre="pepe" hora="12:02">¿En qué playa?</frase> <frase nombre="maria" hora="12:03">En Playa San Juan... habían un monton

de medusas </frase> <frase nombre="pepe" hora="12:04">Son una plaga. Un día me picó una. </frase> <frase nombre="maria" hora="12:00">Si...</frase> </chat>

Este sencillo documento XML incluye un elemento raíz, <chat/>, con 6 elementos <frase/> hijos. Utilizando este documento como referencia, podemos explorar el DOM. El árbol DOM está basado en las relaciones que tienen unos nodos con otros. Un nodo puede contener otros nodos o nodos hijo. Un nodo puede compartir el mismo padre que otros nodos, convirtiéndose estos en hermanos. Para recuperar el primer elemento <frase> usamos la propiedad firstChild. Si queremos averiguar el nombre del nodo tendremos que usar la propiedad NodeName. function elementos(){ //Primer elemento consola("Primer elemento"); var raiz = xmlDoc.documentElement; var primerelemento = raiz.firstChild; consola(primerelemento.nodeName); }

La asignación de documentElement a “raiz” ahorra espacio y trabajo de escritura, aunque no es necesaria. Utilizando la propiedad firstChild, hacemos referencia al primer elemento <frase/> y la asignamos a la variable primerelemento, ya que es el primer elemento hijo del elemento raíz <chat />. También podemos utilizar la colección childNodes para conseguir el mismo resultado: var primerelemento = raiz.childNodes[0];

Al aplicar la propiedad nomeName saldrá “<frase/>”. NOTA: En Gecko saldrá “#text” pues está considerando como primer elemento el Enter (\n) que es un texto. Si en este elemento #text usamos tagName en lugar de nodeName, el resultado sería undefined. Si queremos averiguar el nombre de la etiqueta tendríamos que consultar el nombre del siguiente nodo hermano. Digamos que en realidad el XML que interpreta el DOM de Gecko es:


Septiembre 2007

4

<raiz> #text \n #text <hijo>#text El texto #text</hijo>

</raiz>

Por eso podemos hacer esto: var primerelemento = raiz.firstChild; consola('En Gecko sale ' + primerelemento.nodeName); consola('Ahora sale el nombre' + primerelemento.nextSibling.nodeName);

En Gecko veríamos #Text primero. Luego usamos nextSibling para pasar el puntero al segundo hijo que es el nodo que estamos intentando ver y luego el nombre de la etiqueta “frase”. En iExplorer veríamos la etiqueta “frase” del primer hijo. Luego descendemos el puntero al segundo hijo y vemos de nuevo “frase” que es el nombre de la etiqueta de ese hijo. En el caso de que nextSibling apuntara a un elemento que ya no existe (hemos tocado el final del fichero) devolvería el valor de null. El contrario de nextSibling es previousSibling. Si queremos averiguar cúal es el padre (<chat>) que es el DocumentElement del DOM:

var elementopadre = raiz.parentNode; consola(elementopadre.nodeName);

Ambos navegadores reconoceran como nombre de nodo “#document”. Vamos crear un bucle que nos recorra todos los hermanos del hijo del DocumentElement: for (var i=0; i< raiz.childNodes.length; i++){ consola(i + ' ' + raiz.childNodes[i].nodeName); }

Raiz sigue siendo:

var raiz = xmlDoc.documentElement; Con raiz.childNodes.length averiguamos cuantos hijos tiene ese raiz. Con el bucle los vamos recorriendo. Podemos observar cómo iExplorer tiene 6 nodos (del 0 al 5) correspondiente a cada frase. Pero Gecko tiene 12 por lo que hemos explicado. ¿Cómo recuperamos el texto? Usaremos nodeValue. Si estuvieramos trabajando exclusivamente con iExplorer text nos vendría muy bien, pero no tiene soporte en Gecko.


Septiembre 2007

5

for (var i=0; i< raiz.childNodes.length; i++){ if(raiz.childNodes[i].hasChildNodes()){ consola(i + ' ' + raiz.childNodes[i].childNodes[0].nodeValue); } }

Para que con Gecko no de problemas debemos preguntar con el método “hasChildNodes” si se trata de un \n o si se trata efectivamente de un elemento. Hemos usado la colección ChildNodes. Luego hacemos referencia al nodo de texto del elemento <frase/> utilizando firstChild ya que un nodo de texto sigue siendo un nodo de DOM. A continuación, se recupera el texto utilizando la propiedad nodeValue, que recupera el valor del nodo actual. La propiedad text de iExplorer se comporta de forma diferente que cuando utilizamos nodeValue con un nodo de texto: La propiedad text recupera el valor de todos los nodos de texto contenidos dentro del elemento y sus hijos, mientras que la propiedad nodeValue recupera solamente el valor del nodo actual.

7.2.- Métodos Los 2 métodos principales que sirven para recuperar nodos o valores específicos son getAttribute () y getElementsByTagName (). También destacamos para obtener información hasAttributes y hasChildNodes. El cuadro: NOMBRE Y DESCRIPCIÓN DEVU

ELVE DISPO NIBLE

getAttribute( name )

Devuelve el valor de un atributo nombrado desde el nodo actual.

Object

getAttributeNode( name )

Devuelve la representación del nodo del atributo nombrado desde el nodo actual.

Attr

getElementsByTagName( name )

Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta particular, desde el elemento actual.

NodeSet

hasAttribute( name )

Verifica si el elemento tiene el atributo especificado o no.

Boolean

hasAttributes()

Verifica si el elemento tiene o no algún atributo.

Boolean

hasChildNodes()

Verifica si el elemento tiene nodos hijos o no.

Boolean


Septiembre 2007

6

El método getAttribute () toma una cadena como argumento que contiene el nombre del atributo y devuelve su valor. Si el atributo no existe, el método devuelve null. var sAtributo; var raiz = xmlDoc.documentElement; for (var i=0; i< raiz.childNodes.length; i++){ if(raiz.childNodes[i].hasChildNodes()){ sAtributo = raiz.childNodes[i].getAttribute("nombre"); consola(i + ' ' + sAtributo); } }

Este código recupera el valor del atributo “nombre” correspondiente a cada hijo del nodo raiz (a las “<frase/>”) y la asigna a la variable sAttribute. Luego, se utiliza este valor con la consola para mostrar el valor. El método getElementsByTagName devuelve un NodeList de elementos hijo con el nombre especificado por su argumento. Este método busca solamente los elementos dentro del nodo especificado, de forma que el NodeList devuelto no incluye ningún elemento externo. Por ejemplo: var aElementos = raiz.getElementsByTagName("frase"); consola('Número de Elementos: ' + aElementos.length)

Este código recupera todos los elementos <frase/> dentro del documento y devuelve NodeList a aElementos. Con el documento XML de ejemplo anterior, aparecerá en la consola el mensaje de “Número de elementos: 6”. Para recuperar todos los elementos hijo, pasaremos " * " como parámetro para getElementByTagNarne (), como Sigue: var cElementos = oRoot.getElementsByTagName ( "*") ;

Dado que el documento XML contiene sólo elementos <frase/>, el NodeList resultante de este código de ejemplo, coincide con el del ejemplo anterior. EJERCICIO Con todas las herramientas ofrecidas y con el XML del chat propuesto se pide obtener esta tabla para ambos navegadores:


Septiembre 2007

7

Nota: Esta tabla la pintaremos pasando todas las etiquetas de table a consola. Para ello primero hay que guardar en una variable la cadena y luego pasarla a la consola. Si pasamos etiqueta por etiqueta innerHTML las cierra, con lo que quedaría: <table></table><tr></tr>…

8.- Recorrer DOM HTML El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto en un nodo de texto. Para comprender más fácilmente véase el siguiente ejemplo: <body> <p>Esto es un párrafo que contiene <a href="#">un enlace</a> en el medio. </p> <ul> <li>Primer punto en la lista</li> <li>Otro punto en la lista</li> </ul> </body>

Como puede verse un elemento [a] se encuentra localizado dentro de un elemento [p] del HTML, convirtiéndose en un nodo hijo, o simplemente hijo del nodo [p], de manera similar [p] es el nodo padre. Los dos nodos li son hijos del mismo padre, llamándose nodos hermanos o simplemente hermanos. Es importante comprender la diferencia entre elementos y nodos de textos. Los elementos comúnmente son asociados a las etiquetas. En HTML todas las etiquetas son elementos, tales como <p>, <img> y <div> por lo que tienen atributos y contienes nodos hijos. Sin embargo, los nodos de textos no poseen atributos e hijos.

Siempre use el DOCTYPE correcto El DOCTYPE (abreviado del inglés “document type declaration”, declaración del tipo de documento) informa cual versión de (X)HTML se usará para validar el documento; existen varios tipos a seleccionar. El DOCTYPE, debe aparecer siempre en la parte superior de cada página HTML y siendo un componente clave de las páginas web “obedientes” a los estándares. En caso de usarse un DOCTYPE incompleto, no actualizado o simplemente no usarlo llevará al navegador a entrar en modo raro o extraño, donde el navegador asume que se ha programado fuera de los estándares. Todavía todos los navegadores actuales no son capaces de procesar correctamente todos los tipos de documentos, sin embargo, muchos de ellos funcionan correctamente en los navegadores más utilizados actualmente, tales como: HTML 4.01 Strict y Transitional


Septiembre 2007

8

XHML 1.0 Strict y Transitional los se comportan del modo correcto en Internet Explorer (versión 6, 7 Beta), Mozilla y Opera 7. De ahora en adelante se adoptará para cada ejemplo HTML 4.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Resultando una única línea de código, o dos líneas con un salto de línea después de EN”.

La importancia de validar el HTML Si los elementos son anidados de manera inadecuada pueden generarse problemas, véase la siguiente línea: <p>Estos elementos han sido <strong>incorrectamente </p>anidados </strong>

El árbol que resulta de esto se encuentra incorrectamente anidado del todo, por tanto generará errores inesperados en los navegadores. Manteniendo su HTML válido se pueden evitar tales problemas.

Accediendo a los elementos Afortunadamente, Javascript permite acceder a cada uno de los elementos de una página utilizando tan sólo algunos métodos y propiedades. Si desea encontrar de manera rápida y fácil un elemento usamos el ya comentado método getElementById. Esta vez no es necesario cargar el XML, document encierra ya este HTML. Véase el siguiente ejemplo: <p> <a id="contacto" href="contactos.html">Contáctenos</a> </p>

Puede usarse el atributo id del elemento a para acceder al mismo: var elementoContacto = document.getElementById("contacto");

Ahora el valor de la variable elementoContacto está referida al elemento [a] y cualquier operación sobre la misma afectará el hiperenlace. El método getElementById es adecuado para operar sobre un elemento en específico, sin embargo, en ocasiones se necesita trabajar sobre un grupo de elementos por lo que en este caso puede utilizarse el método, ya comentado, getElementsByTagName. <ul> <li><a href="editorial.html">Editorial</a></li> <li><a href="semblanza.html">Autores</a></li> <li><a href="noticias.html">Noticias</a></li> <li><a href="contactos.html">Contátenos</a></li> </ul>


Septiembre 2007

9

Puede obtenerse todos los hipervínculos de la siguiente manera: var hipervinculos= document.getElementsByTagName("a");

El valor de la variable hipervinculos es una colección de elementos [a]. Las colecciones son arreglos pudiéndose acceder a cada elemento a través de la ya conocida notación con corchetes. Otra maneras de acceder a un elemento usando su id es document.all["id"] la cual fue introducida en Internet Explorer 4 y document.layers["id"] introducida por Netscape 5 por que el W3C todavía no había estandarizado la manera de acceder a los elementos mediante su id. Sin embargo, no se recomienda su uso porque al estar fuera de los estándares actuales hay navegadores que no soportan estos métodos. Por otro lado existen varios elementos en un documento HTML que pueden ser accedidos de otras maneras. El elemento body de un documento puede accederse a través de la forma document.body, mientras que el conjunto de todos los formularios en un documento puede encontrase en document.forms, así mismo el conjunto de todas las imágenes sería mediante document.images. Actualmente la mayoría de los navegadores soportan esto métodos aún así es recomendable el uso del método getElementsByTagName. EJERCICIO Dada esta página web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script> function consola(txt){ var con = document.getElementById("consola"); con.innerHTML += txt + "<hr> "; } </script> </head> <body> <div id="consola"></div> <table border='1'> <tr><td>UNO</td></tr> <tr><td>DOS</td></tr> <tr><td>TRES</td></tr> </table> </body> </html>

Provoca un evento que vuelque en consola un listado ordenado con las filas invertidas:


Septiembre 2007

10

9.- Manipulación de DOM XML / HTML

9.1.- Crear nodos MÉTODOS NOMBRE Y DESCRIPCIÓN DEVU

ELVE DISPO NIBLE

appendChild( appendedNode )

Registra un controlador de evento para un tipo de evento específico en un elemento.

Nodo

document.createElement

Crea un nuevo elemento con el nombre de etiqueta dado.

document.createTextNode

Crea un nodo de texto.

setAttribute( name, value )

Establece el valor de un atributo nombrado desde el nodo actual.

Para crear un nodo primero generamos un cimiento con el método createElement () . Este método acepta un argumento, una cadena que contiene el nombre de la etiqueta del elemento que queremos crear y devuelve una referencia XMLDOMElement. var oNeoFrase = XmlDoc.createElement("frase"); XmlDoc.documentElement.appendChild(oNeoFrase);

Este código crea un nuevo elemento (createElement) <frase/> y luego lo añade a documentElement con el método appendChild(). El método appendChild() añade el nuevo elemento, especificado por su argumento, como último nodo hijo. Sin embargo, este código añade un elemento <frase/> vacío al documento. Si hacemos ahora esto: var aElementos = raiz.getElementsByTagName("frase"); consola(aElementos.length);

el resultado será de 7. Vamos a añadir algo de texto: Recordamos como funciona DOM: <raiz>

#text \n #text <hijo>#text El texto #text</hijo>

</raiz>

Por tanto: 1 Creamos el nodo <hijo/>


Septiembre 2007

11

2 Creamos un nodo texto para ese hijo. 3 Encadenamos el nodo texto al que será su padre <hijo/> 4 Encadenamos el node <hijo/> al que será su padre (en caso d colgar del raiz documentElement). var oNeoFrase = xmlDoc.createDocument("frase"); var oNeoFraseTxt = xmlDoc.createTextNode ("Esas picaduras duelen mucho"); oNeoFrase.appendChild(oNeoFraseTxt); xmlDoc.documentElement.appendChild(oNeoFrase);

Este código crea un nodo de texto mediante el método createTextNode() y lo añade al nuevo elemento <frase/> que acabamos de crear con appendChild (). El método createTextNode() acepta un argumento de cadena que especifica el valor que queremos aplicar al nodo de texto.

Vamos ahora por los atributos (null de la tabla). El método setAttribute(), disponible en cualquier nodo de un elemento: var oNeoFrase = xmlDoc.createDocument("frase"); var oNeoFraseTxt = xmlDoc.createTextNode ("Esas picaduras duelen mucho"); oNeoFrase.appendChild(oNeoFraseTxt); oNeoFrase.setAttribute("nombre","Jorge"); oNeoFrase.setAttribute("hora","13:00"); xmlDoc.documentElement.appendChild(oNeoFrase);

Las nuevas líneas de código en este ejemplo crean dos atributos “nombre” con el valor “Jorge” y “hora” con las “13:00”. EJERCICIO Crea un evento que inserte el “CUATRO” en esta página HTML. <table border='1'> <tr><td>UNO</td></tr> <tr><td>DOS</td></tr> <tr><td>TRES</td></tr> </table>


Septiembre 2007

12

9.2.- Eliminar, reemplazar, insertar nodos METODOS NOMBRE Y DESCRIPCIÓN DEVU

ELVE DISPO NIBLE

removeChild( nodo )

Quita el nodo hijo desde el elemento actual.

Nodo

replaceChild( insertedNode, replacedNode )

Reemplaza un nodo hijo en el elemento actual con otro.

Nodo

insertBefore( insertedNode, adjacentNode )

Inserta el primer nodo antes que el segundo, Nodo hijo en el DOM.

Nodo

removeAttribute( name )

Quita el atributo nombrado desde el nodo actual.

hasAttribute( name )


Boolean

hasAttributes()

Verifica si el elemento tiene o no algún atributo.

Boolean

hasChildNodes()

Verifica si el elemento tiene nodos hijos o no.

Boolean

removeAttribute( name )

Quita el atributo nombrado desde el nodo actual.

cloneNode(nodo)

Hace copia de un nudo, y opcionalmente, de todo sus contenidos

Nodo

EI método removeChild(nodo) elimina nodos. Si quisieramos eliminar el primer elemento “<frase />” del documento: function delelementos(){ var raiz = xmlDoc.documentElement; var aElementos = raiz.getElementsByTagName("frase"); var nodokaput = raiz.removeChild(aElementos[0]); }

El método removeChild(nodo) devuelve el nodo eliminado de forma que, ahora, hace referencia al elemento “<frase />” eliminado. Tenemos una referencia (nodokaput) del antiguo nodo que podemos colocar en cualquier parte en el documento, con lo que lo que hacemos es moverlo. Podríamos querer sustituir la tercera <frase/> con nodokaput. El método replaceChild() lo hace y devuelve el nodo reemplazado: var nodo_reempla= raiz.replaceChild(nodokaput, aElementos[2]);


Septiembre 2007

13

El método replaceChild() acepta dos argumentos: el nodo para añadir y el nodo a sustituir. En este código, el nodo al que hace referencia nodokaput sustituye al tercer elemento <frase/> y oReplacedChild hace ahora referencia al nodo reemplazado. Ahora podríamos utilizar appendChild() para añadir el nodo al final o utilizar el método insertBefore() para insertarlo antes de otro de sus hermanos: raiz.insertBefore(nodo_reempla, raiz.lastChild);

Este código inserta el nodo reemplazado antes del último elemento <frase/>. El método insertBefore() necesita dos argumentos: el nodo que queremos insertar y el nodo delante del cuál se desea insertar el nuevo. Este método devuelve también el valor del nodo insertado. EJERCICIO Dada esta tabla, colocar en cada celda un enlace que al pincharlo el tr pinchado descienda un nivel. Ojo con la última celda. <table border='1'> <tr id=”1”><td> <a href="#" onclick="mover(1)">UNO</a></td></tr> <tr id=”2”><td> <a href="#" onclick="mover(2)">DOS</a></td></tr> <tr id=”3”><td> <a href="#" onclick="mover(3)">TRES</a></td></tr> <tr id=”4”><td> <a href="#" onclick="mover(4)">CUATRO</a></td></tr> </table>


Septiembre 2007

14

10.- Manipulación de DOM especifico HTML (prop) innerHTML


Código HTML

(met) getAttribute()

Devuelve el valor de un atributo nombrado desde el nodo actual.

Objeto

(met) setAttribute()

(prop) style.proCSS

(prop) style.media

Indica el medio de destino para el estilo.

(prop) style.type

Indica el tipo de estilo que está siendo aplicado.

(met) addEventListener( type, handler, bubble ) Inserta un nodo así como el último nodo hijo de este elemento.

Node

10.1.- Usando innerHTML En aplicaciones complejas donde es necesario crear varios elementos a la vez, el código JavaScript generado puede ser extenso. Por eso podemos recurrir a la propiedad innerHTML. Esta permite leer y escribir el contenido HTML de un elemento. Por ejemplo, puede crearse fácilmente una tabla con múltiples celdas e insertarla luego en la página con innerHTML: var tabla = '<table border="0">'; tabla += '<tr><td>Celda 1</td><td>Celda 2</td><td> Celda 3</td></tr>'; tabla += '</table>'; document.getElementById("datos").innerHTML = tabla;

Valga como ejemplo también la consola que vamos arrastrando desde el principio.

10.2.- Lectura y escritura de los atributos de un elemento Las partes más frecuentemente usadas de un elemento HTML son sus atributos, tales como: id, class, href, title, estilos CSS, entre muchas otras piezas de información que pueden se incluidas en una etiqueta HTML. Los atributos de una etiqueta son traducidos por el navegador en propiedades de un objeto. Dos métodos existen para leer y escribir los atributos de un elemento, getAttribute permite leer el valor de un atributo mientras que setAttribute permite su


Septiembre 2007

15

escritura. En ocasiones se hace necesario ver las propiedades y métodos de un determinado elemento, esto puede realizarse mediante la siguiente función utilitaria: function inspector(el) { var str =””; for (var i in el){ str+=I + “: ” + el.getAttribute(i) + “n”; } alert(str); }

Para usar la función inspector() tan sólo debe pasarle la referencia al elemento, continuando con el ejemplo anterior resulta: var ancla = document.getElementById("editor"); inspector(ancla);

Para modificar el atributo title del hipervínculo, elemento referenciado por la variable ancla, se usará el setAttribute, pasándole el nombre del atributo y el valor: var ancla = document.getElementById("editor"); ancla.setAttribute("title", "Artículos de programación"); var nuevoTitulo = ancla.getAttribute("title"); El valor de la variable nuevoTitulo es ahora “Artículos de programación”.

10.3.- Manipulando los estilos de los elementos Aunque los atributos que le son asignados a las etiquetas HTML están disponibles como propiedades de sus correspondientes nodos en el DOM, las propiedades de estilo pueden ser aplicadas a través del DOM. Cada atributo CSS posee una propiedad del DOM equivalente, formándose con el mismo nombre del atributo CSS pero sin los guiones y llevando la primera letra de las palabras a mayúsculas. Véase el siguiente ejemplo:

algun-atributo-css pasaría a ser algunAtributoCss

Por tanto, para cambiar el atributo CSS font-family de un elemento, podría realizarse de lo siguiente:

ancla.style.fontFamily = 'sans-serif';

Los valores CSS en Javascript serán en su mayoría del tipo cadena; por ejemplo: font-size, pues posee dimensiones tales como “px”, “%”. Sólo los atributos completamente numéricos, tales como z-index serán del tipo entero. En muchos casos es necesario aparecer y desaparecer un determinado elemento, para ellos se utiliza el atributo CSS display, por ejemplo,


Septiembre 2007

16

para desaparecer ancla.style.display = 'none'; para aparecer ancla.style.display = 'inline';

EJERCICIO Dado el ejercicio anterior consigue que esta tabla tenga fondo de color diferente según la fila sea par o impar, aunque se muevan las filas.

Ayudandote de estas funciones: setInterval y setTimeout

Permiten ejecutar una función pasado un cierto intervalo de tiempo. La única diferencia entre ellas es que "setInterval" se ejecutará una y otra vez en intervalos de x segundos, en cambio, setTimeout se ejecutará una sola vez pasados x segundos. Estas funciones se utilizan sobre todo para realizar animaciones o por ejemplo para redireccionar una página transcurridos x segundos. Ejemplo: var id = setInterval("opacidad()",20); //Repite opacidad cada 20 miliseg. setTimeout("clearInterval("+id+")",15000); //Deja de repetir opacidad a los 15000.

Y de esta definición de estilo: divimg.style.filter = "alpha(opacity="+kopacidad+")"; (iExplorer) divimg.style.opacity = kopacidad/100; (Gecko)

Consigue que una imagen de “diluya” y “vuelva a verse” como una consola. Momento 1

Momento 2

Momento 3

Momento 4

Momento 5


Septiembre 2007

17

10.4.- La interfaz evento (Event) de DOM Los gestores de eventos pueden estar atados a varios elementos en el DOM. Cuando un evento ocurre, un objeto de evento es dinámicamente creado y pasado secuencialmente a las "escuchas" (listeners) autorizadas para la gestión del evento. La interfaz Event del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento. El ejemplo siguiente muestra como un objeto de evento es pasado a una función de gestión de evento, y puede llamarse desde otra parecida. <html> <head> <title>Ejemplo de parámetro de objeto de evento</title> <script type="text/javascript"> function showCoords(event){ alert( "clientX value: " + event.clientX + "\n" + "clientY value: " + event.clientY + "\n" ); } </script> </head> <body onmousedown="showCoords(event)">

<p>Para ver las coordinadas del ratón haga clic en cualquier lugar de esta página.</p>

</body> </html>

Este ejemplo es muy simple pero muestra una característica importante de los eventos en el DOM de Gecko, la cual es que en el DOM se accede a los objetos de eventos a través de las funciones de manejo. Entonces al tener una referencia al objeto de evento, se puede llegar a todas las propiedades y métodos descritos en este capítulo. Lista de los gestores de evento del DOM Además del objeto event descrito aquí, el Gecko DOM también proporciona métodos para registrar oyentes de eventos en nodos en el DOM, quitando aquellos oyentes de eventos, y enviando eventos desde el DOM (no lo vamos a ver en este curso). Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado event, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja this, pero para objetos de eventos, más bien que las referencias del objeto del elemento. El parámetro predefinido del objeto event permite pasar tantos parámetros de gestión de evento como sea necesario:


Septiembre 2007

18

<html> <head> <title>Ejemplo de objeto con varios parámetros</title> <script type="text/javascript"> var par2 = 'hello'; var par3 = 'world!'; function muestraCoords(evt, p2, p3){ alert( "clienteX value: " + evt.clientX + "\n" + "clientY value: " + evt.clientY + "\n" + "p2: " + p2 + "\n" + "p3: " + p3 + "\n" ); } </script> </head> <body onmousedown="muestraCoords(event, par2, par3)"> <p>Para ver las coordinadas del ratón haga clic en cualquier lugar de esta página.</p> </body> </html>

Propiedades

event.altKey Devuelve un valor indicando si la tecla <alt> fue pulsada durante el evento.

event.bubbles Devuelve un valor que indica si el evento se propaga hacia arriba a través del DOM o no.

event.button Devuelve el botón del ratón.

event.cancelable Devuelve un valor que indica si el evento se puede cancelar.

event.charCode Devuelve el valor Unicode de una tecla de carácter que fue apretada como parte de un evento keypress.

event.clientX (event.clientY ) Devuelve la posición horizontal (vertical) del evento.

event.ctrlKey Devuelve un valor que indica si la tecla <Ctrl> fue apretada durante el evento.

event.currentTarget Devuelve una referencia al objetivo actual registrado para el evento.

event.detail Devuelve detalles sobre el evento, dependiendo del tipo de evento.

event.eventPhase Utilizado para indicar qué fase del flujo del evento es actualmente en proceso de evaluación.


Septiembre 2007

19

event.explicitOriginalTarget El objetivo del evento (específico a Mozilla).

event.isChar Devuelve un valor que indica si el evento produce o no una tecla de carácter.

event.keyCode Devuelve el valor Unicode de una tecla que no es caracter en un evento keypress o cualquier tecla en cualquier otro tipo de evento de teclado.

event.layerX Devuelve la coordenada horizontal del evento relativo a la capa actual.

event.layerY Devuelve la coordenada vertical del evento relativo a la capa actual.

event.metaKey Devuelve un valor booleano indicando si la meta tecla fue presionada durante un evento.

event.originalTarget El objetivo principal de un evento, antes de cualquier reapunte (Especifiación Mozilla).

event.pageX Devuelve la coordenada horizontal del evento, relativo al documento completo.

event.pageY Devuelve la coordenada vertical del evento, relativo al documento completo.

event.relatedTarget Identifica un objetivo secundario para el evento.

event.screenX Devuelve la coordenada horizontal del evento en la pantalla.

event.screenY Devuelve la coordenada vertical del evento en la pantalla.

event.shiftKey Devuelve un valor booleano indicando si la tecla <shift> fue presionada cuando el evento fue disparado.

event.target Devuelve una referencia al objetivo en la cual el evento fue originalmente enviado.

event.timeStamp Devuelve el momento de creación del evento.

event.type Devuelve el nombre del evento (distingue mayúsculas y minúsculas).

event.view El atributo vista identifica la AbstractView del cual el evento fue generado.


Septiembre 2007

20

event.which Devuelve el valor Unicode de la tecla en un evento del teclado, sin importar el tipo de tecla que se presionó.

Métodos event.initEvent Inicia el valor de un evento que se ha creado vía la

interfaz DocumentEvent.

event.initKeyEvent Inicia un evento del teclado. (Específico de Gecko).

event.initMouseEvent Inicia un evento del ratón una vez que se ha creado.

event.initUIEvent Inicia un evento de la interfaz de usuario (UI) una vez que se ha creado.

event.preventDefault Cancela el evento (si éste es anulable).

event.stopPropagation Para la propagación de los eventos más allá en el DOM.

EJERCICIO Dado el ejercicio anterior consigue que esta tabla tenga fondo de color diferente según la fila sea par o impar, aunque se muevan las filas. Consigue también que el color del fondo cambie cuando se pone el ratón encima. <table border='1'> <tr id="1"> <td onmouseover="c(this)" onmouseout="noc(this)"><a href="#" onclick="mover(1)">UNO</a></td> <td onmouseover="c(this)" onmouseout="noc(this)">UNO</td> </tr> <tr id="2"> <td onmouseover="c(this)" onmouseout="noc(this)"><a href="#" onclick="mover(2)">DOS</a></td> <td onmouseover="c(this)" onmouseout="noc(this)">DOS</td> </tr> <tr id="3"> <td onmouseover="c(this)" onmouseout="noc(this)"><a href="#" onclick="mover(3)">TRES</a></td> <td onmouseover="c(this)" onmouseout="noc(this)">TRES</td> </tr> <tr id="4"> <td onmouseover="c(this)" onmouseout="noc(this)"><a href="#" onclick="mover(4)">CUATRO</a></td> <td onmouseover="c(this)" onmouseout="noc(this)">CUATRO</td> </tr> </table>


Septiembre 2007

21

10.5.- Formulario de HTML (HTMLFormElement). Esta interfaz proporciona métodos para crear y modificar los elementos FORM usando el DOM. El siguiente ejemplo muestra como crear un nuevo formulario, como modificar sus atributos y enviarlo: // Crea un formulario var f = document.createElement("form"); // Lo añade en el cuerpo ('body') del documento document.body.appendChild(f); // Añade los atributos de acción y método f.action = "/cgi-bin/some.cgi"; f.method = "POST" // Llama el método de enviar el formulario f.submit();

Además, el siguiente documento HTML muestra como se puede extraer información de un formulario y cambiar algunos de sus atributos. <title>Ejemplo de formulario</title> <script type="text/javascript"> function getFormInfo() { var info; // Obtiene una referencia utilizando la colección de formularios var f = document.forms["formularioA"]; info = "f.elements: " + f.elements + "\n" + "f.length: " + f.length + "\n" + "f.name: " + f.elements + "\n" + "f.acceptCharset: " + f.acceptCharset + "\n" + "f.action: " + f.action + "\n" + "f.enctype: " + f.enctype + "\n" + "f.encoding: " + f.encoding + "\n" + "f.method: " + f.method + "\n" + "f.target: " + f.target; document.forms["formularioA"].elements['tex'].value = info; } // Se pasa la referencia al formulario desde el atributo al hacer clic // ('onclick') del botón con la ayuda de este.formulario ('this.form') function setFormInfo(f) { f.method = "GET"; f.action = "/cgi-bin/evil_executable.cgi"; f.name = "totally_new"; } </script>


Septiembre 2007

22

<form name="formularioA" id="formularioA" action="/cgi-bin/test" method="POST"> <p>Haga clic en "Info" para ver informaciones de este formulario. Haga clic en "Set" para cambiar los parámetros y otra vez en "Info" para ver los efectos</p> <p> <input type="button" value="Info" onclick="getFormInfo();"> <input type="button" value="Set" onclick="setFormInfo(this.form);"> <input type="reset" value="Reset"> <br> <textarea id="tex" style="height:15em; width:20em"> </p> </form>

Propiedades form.elements (todos los elementos del formulario)

.elements devuelve una colección de todos los controles que hay en el formulario FORM.

form.length .length devuelve la cantidad de controles que hay en el formulario

form.name .name devuelve el nombre del formulario actual en forma de cadena.

form.acceptCharset .acceptCharset devuelve una lista del conjunto de caracteres soportados para el actual elemento FORM.

form.action .action obtiene/configura la acción del elemento FORM.

form.enctype .enctype gets/sets the content type of the FORM element.

form.encoding .encoding gets/sets the content type of the FORM element.

form.method .method obtiene/configura el método HTTP utilizado para enviar el formulario.

form.target .target obtiene/configura el objetivo de la. Métodos form.submit submit() manda el formulario.

form.reset reset() restaura el formulario, lo devuelve al estado inicial.


Septiembre 2007

23

10.6.- Tablas en HTML (HTMLTableElement) Propiedades table.caption caption devuelve la leyenda de la tabla.

table.tHead tHead devuelve el encabezado de la tabla.

table.tFoot tFoot devuelve el pie de la tabla.

table.rows rows devuelve las filas de la tabla.

table.tBodies tBodies devuelve los cuerpos de la tabla.

table.align align da/define el alineamiento de la tabla.

table.border border da/define el borde de la tabla.

table.cellPadding cellPadding da/define el relleno interno de las celdas.

table.cellSpacing cellSpacing da/define el espacio entre celdas.

table.frame frame especifica que lados de la tabla tienen borde.

table.rules rules especifica cuales de los bordes internos son visibles.

table.summary summary da/define el resumen de la tabla.

table.width width da/define el ancho de la tabla. Métodos table.createTHead createTHead crea el encabezado de la tabla.

table.deleteTHead deleteTHead elimina el encabezado de la tabla.

table.createTFoot createTFoot crea el pie de tabla.

table.deleteTFoot deleteTFoot elimina el pie de tabla.

table.createCaption createCaption crea una nueva leyenda para la tabla.

table.deleteCaption deleteCaption elimina la leyenda de tabla.

table.insertRow insertRow inserta una nueva fila.

table.deleteRow deleteRow elimina una fila.

11.- Gestión de errores. EXPLORER: Ante una carga de datos XML, se pueden producir errores y MSXML proporciona el objeto parseError, que contiene información sobre el error. Para comprobar errores el objeto parseError expone la propiedad errorCode, si vale 0 no se ha producido error. El siguiente ejemplo, está diseñado específicamente para generar un error:


Septiembre 2007

24

var sXml = " <root><persona><nombre>Marcos</persona></nombre></root>"; var oXmlDom = createDocument(); oXmlDom.loadXML(sXml) ; if(oXmlDom.parseError.errorCode ! = 0) { alert("Error: " + oXmlDom.parseError.reason); } else {…};

El objeto parseError proporciona las siguientes propiedades:

• errorCode. El código de error, un valor entero largo. • filePos. Un entero largo que especifica la posición en el archivo donde se ha

producido el error. • line. El numero de línea que contiene el error como valor entero largo. • linePos. La posición del carácter dentro de la línea donde se ha producido el

error (entero largo). • reason. Una cadena que especifica por qué ye ha producido el error. • srcText. El texto de la linca donde se ha producido el error. • url. La dirección URL del documento XML en forma de cadena.

OJO: La propiedad errorCode puede ser positiva o negativa. FIREFOX: Cuando Firefox se encuentra con un error, carga un documento XML que contiene el error en un documento DOM de XML. Observe el siguiente ejemplo: var sXml = "<root><persona><nombre>Marcos</persona></nombre></root>"; var oParser = new DOMParser() ; var oXmlDom = oParser .parseFromString (sXml, "text/xml ">; if (oXmlDom.documentElement.tagName != "parsererror") { //No se ha producido ningún error. Hacer algo aquí. } else {alert("ERROR");}

Podemos determinar fácilmente si se ha producido un error comprobando el valor de la propiedad tagName de documentElement. El documento de error que se crea en este ejemplo, tendrá un aspecto como este: <parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">XML Parsing Error: mismatched tag. Expected: </person>. Location: http://yoda/fooreader/test.htm Line Number 1 Column 43:<sourcetex><root><person><name>Marcos</name > </root> -----------------------------------------------------^</sourcetext ></parsererror >

Toda la información sobre el error está disponible en forma de texto en el documento de error. Para extraer la información distinguiendo entre tipo error, localización, etc deberíamos usar una expresión regular bastante larga.


Septiembre 2007

25

12.- BIBLIOGRAFÍA Y REFERENCIAS URL: Referencia bastante completa de DOM: Referencia http://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko Introducción: http://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko:Introducci%C3%B3n Elementos: http://developer.mozilla.org/es/docs/DOM:element Eventos (poco tratado en estas líneas) del DOM: http://kusor.net/traducciones/brainjar.es/events2.es.html Por qué no abusar del innerHTML: http://www.anieto2k.com/2006/12/18/dom-como-alternativa-a-innerhtml/ Bibliografía: http://www.amazon.com/Professional-Ajax-2nd-Nicholas-Zakas/dp/0470109491/ Página del autor: http://www.nczonline.net/

tema 3b: manipulaciÓn de dom · los elementos html y xml, hay muchas más especiales para los...

Documents