Curso de AJAX

Como se indicó, con DOM el programador puede construir documentos, navegar en su estructura y, agregar, modificar y borrar elementos y contenido de los mismos. En el ejemplo anterior se mostró cómo se puede acceder a los elementos de un documento para su navegación.

A continuación, se mostrará un ejemplo que permite agregar elementos a un documento HTML al hacer clic sobre un botón de este.

Considere el siguiente documento HTML:

Al hacer click sobre el botón de nombre mi_button se ejecuta la función JavaScript de nombre agregarElemento. Esta agrega una tabla dentro del elemento HTML Div cuyo id es mi_div.

La tabla a agregar se muestra a continuación:

El código de la función JavaScript es el que sigue:

• 1: Se accede al elemento DIV.
• 2: Se crea el elemento table.
• 3: Se crea el elemento tbody.
• 4: Se crea la fila de la tabla.
• 5: Se crea la columna de la tabla.
• 6: Se crea un nodo de tipo texto, conteniendo el texto "Hola Mundo".
• 7: Se agrega a la columna creada en 5 el nodo de tipo texto creado en 6.
• 8: Se agrega a la fila creada en 4 la columna creada en 5.
• 9: Se agrega al cuerpo de la tabla la fila.
• 10: Se agrega a la tabla el cuerpo de la tabla.
• 11: Se agrega al DIV la tabla creada.

En el código anterior se utilizó únicamente el módulo DOM Core. En el siguiente código de la función agregarElemento mostramos cómo se puede obtener la misma funcionalidad pero utilizando el módulo DOM HTML. Recordemos que este módulo ofrece objetos con métodos y propiedades específicos para el manejo de HTML.

Al crear el elemento table en la línea 1 estamos creando un objeto de tipo HTMLTableElement el cual ofrece el método insertRow, específico del módulo DOM HTML. Este método devuelve un objeto de tipo HTMLTableRowElement que contiene el método insertCell.

Como conclusión, la utilización del módulo DOM HTML para el manejo de Documentos HTML brinda beneficios, dado que fue creado específicamente para el manejo de estos.

Usted puede ver la especificación de Dom Nivel 3 en la siguiente dirección:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407

Usted puede ver la especificación de Dom Nivel 3 en la siguiente dirección:
http://www.w3.org/TR/2004/REC-DOM-Level-3-LS-20040407

Veamos ahora un ejemplo de cómo modificar un elemento del documento.

Considere el siguiente documento HTML:

Al hacer click sobre el botón de nombre mi_button se ejecuta la función JavaScript de nombre modificarElemento. Esta localiza el elemento cuyo id es mi_txt y modifica la propiedad 'value' del mismo.

En la línea 1 del código anterior se accede al elemento INPUT del HTML. Para esto se utiliza el método getElementById("mi_txt") del objeto Document. El nodo devuelto es de tipo HTMLInputElement.

En la línea 2 del código anterior se accede a la propiedad 'value' del elemento HTMLInputElement y se la modifica.

Siguiendo con este ejemplo, vamos a ver cómo se puede eliminar un elemento del documento. En este caso eliminaremos el INPUT utilizando el mismo botón.

Para esto vamos a cambiar la función que se ejecuta al hacer click sobre el botón de nombre mi_button. El elemento quedaría de la siguiente manera:

La función 'eliminarElemento' localiza el elemento y lo elimina del cuerpo del documento.

En la línea 1 del código anterior se accede al elemento INPUT del HTML. Para esto se utiliza el método getElementById("mi_txt") del objeto Document. El nodo devuelto es de tipo HTMLInputElement.

En la línea 2 del código anterior se navega al cuerpo del documento y se elimina el elemento hijo mitxt.

El nivel 1 del DOM no incluye mecanismos para acceder y modificar estilos especificados con CSS1. Por eso, aunque esté fuera del alcance de este capítulo, vamos a ver un ejemplo de cómo lograr esto utilizando la especifiación de DOM nivel 2 para las hojas de estilo, ya que resulta algo muy útil.

CSS ofrece una forma concisa de aplicar estilos predefinidos y reutilizables a los documentos. Puede ser utilizado para aplicar parámetros de estilo a una etiqueta individual, a todas las etiquetas de un tipo dado o a las que se les haya asignado clases. Podemos alterar el estilo de un elemento en varios niveles. Por ejemplo se puede cambiar el atributo 'style' de un elemento HTML o su atributo 'class'. Veamos algunos ejemplos de estos casos.

Considere la siguiente porción de código HTML:

Por ejemplo, para modificar la alineación del texto podríamos usar el siguiente código JavaScript:

Nótese que cuando el nombre de un parámetro CSS contiene un guión ('-') como en 'text-align', el nombre de su correspondiente propiedad style se construye quitando el guión y pasando a mayúsculas la primera letra que le sigue, en este caso quedaría como 'textAlign'. Si un parámetro en particular de style no está definido inicialmente para un elemento, se puede utilizar de todas formas usando DOM.

A través de la propiedad 'className' de los nodos en DOM, podemos modificar el atributo 'class' de un elemento, aplicando un estilo predefinido:

Usted puede ver esta especifiación en la siguiente dirección:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/

Usted puede ver la especificación de CCS1 en la siguiente dirección:
http://www.w3.org/TR/1999/REC-CSS1-19990111