Modificando HTML desde el browser

Escrito el 5 Febrero, 2001 – 16:02 | por storm | 1.804 lecturas

Cuantas veces se ha frustrado un desarrollador por tener que recargar toda una pagina para cambiar solo una o dos palabras. En este articulo se describe como usar las funciones DOM de Internet Explorer para hacer simplemente magia. Este articulo puede cambiar su vida.

Modificando HTML desde el browser

Richie Adler

Una idea simple

Todos los que han creado o programado paginas web se han encontrado tarde o temprano con el mismo inconveniente: modificar una pagina requiere re-cargar toda la pagina. Muchas interfases o ideas interesantes han quedado relegadas por la imposibilidad de modificar una pequeña parte de la pantalla segun los deseos del usuario. Los frames son una solucion pero escalan mal, eventualmente no podemos tener una pagina con 54 frames porque se vuelve inmanejable para el server, el usuario y el desarrollador

El advenimiento de XML como el mas fuerte standard para el modelado de datos de los ultimos tiempos trajo varias ideas frescas a la web, una de ellas es que bien puede escribirse HTML como XML (Xhtml) y por consiguiente puede modificarse Html como si fuera XML.

La w3c, entidad que agrupa la mayoria de los standares abiertos usados hoy en dia en la web dispuso rapidamente de un standard para acceder y manipular documentos XML desde distintas plataformas que denomino DOM (Document Objetc Model). El DOM es un standard que indica como un documento XML puede representarse como un arbol y cual es la API que puede usarse para navegar y modificar este arbol, agregando nodos, copiando nodos, eliminando nodos, ramas o subramas, cambiando atributos y mucho mas.

En uno de sus escasos movimientos acertados Microsoft adopto rapidamente el DOM y lo incluyo en su browser IE, de esta forma una herramienta extremadamente poderosa se agrega al conjunto de elementos disponibles en el cliente (browser). El DOM del IE permite acceder y modificar libremente un documento HTML desde JavaScript, cosa que resultaba imposible (inpensable?) en los dias del viejo Html

Lamentablemente Netscape en su lento camino hacia la auto-destruccion ignoro el standard por lo que la tecnica que describimos en este articulo funciona unicamente usando como browser IE 5.0 o superior. En muchos ambientes en los cuales el desarrollador controla que cliente debe usarse (intranets) esto es contolable, en otros debe analizarse que hacer de acuerdo a la vieja formula costo/beneficio

Manos a la obra

En este articulo vamos a mostrar unicamente una pequeña aplicacion del DOM que hemos considerado util como forma de ilustrar de que se trata el DOM y como se usa. Se trata de una simple pantalla Html en donde tenemos una tabla con un texto y dos links “prev” y “next”, al clickear en los links sin recargar la pagina el texto de la tabla es modificado automaticamente.

Hi this is a text, how are you?
Prev Next

El codigo


<html>
<head>
<title>Prueba</title>
<script>
var pos=0;
function note(j) {
msgs=new Array(“One”,”two”,”three”);
cant=msgs.length-1;
pos=pos+j;
if(pos<0) {
pos=cant;
}
if(pos>cant) {
pos=0;
}
nombre=msgs[pos];
texto.firstChild.nodeValue=nombre;
}
</script>
<table border=”1″>
<tr><td id=”texto” width=”150″ colspan=”2″>
Hi this is a text, how are you?
</td></tr>
<tr><td><a href=”javascript:void(null);” onClick=”note(-1);”>Prev</a></td><td><a
href=”javascript:void(null);” onClick=”note(1);”>Next</a></td></tr>
</table>

Como vemos cada link tiene capturado el evento “onClick” en donde se invoca la funcion “note”. Si observamos el codigo html podemos ver como el “td” que queremos modificar en la tabla esta identificado por un atributo “id”. En la funcion “note” podemos ver como se obtiene el mensaje que corresponde segun el estado y luego la linea clave que modifica la tabla que es:


texto.firstChild.nodeValue=nombre;

Como pueden ver se referencia al “td” como texto.firstChild.nodeValue lo cual indica que del “nodo” identificado como “texto” debe tomarse el primer hijo y del mismo el valor se cambia al indicado.

Segun el DOM el documento HTML se representa como un arbol donde el elemento <html> es la raiz del mismo, luego los hijos de html son el segundo nivel del arbol y asi sucesivamente, podemos “empezar” a navegar el arbol desde cualquier elemento incluyendo un “id” que referenciamos como en el ejemplo. Una vez parados en un elemento si tiene un valor textual el mismo aparece como hijo del elemento por ejemplo en <b id=”foo”>hola</b> el elemento “foo” tiene un hijo textual cuyo valor es “hola”, de esta forma es como accedemos al valor del TD con la funcion del dom “firstChild” que devuelve el primer hijo del nodo en donde estamos parados.

Este sencillismo ejemplo que hemos construido sirve para ilustrar la potencia del DOM como herramienta para manipular Html desde JavaScript, desde textos hasta tablas enteras o parrafos o lo que uno quiera puede modificarse usando el DOM, la cantidad de cosas que pueden hacerse usando esta tecnica queda limitada unicamente a la imaginacion. Es de esperar que el DOM este en un futuro cercano implementado en todos los browsers en la medida en que los mismos adopten nuevos standards por lo que creemos que esta sera una herramienta usada ampliamente para construir paginas interactivas, con mejores interfases y mucho mas optimizadas

Richie Adler

You must be logged in to post a comment.

Buscar: