Manipulación del DOM

El Document Object Model es un estándar de la W3C para la manipulación de documentos XML y HTML. Básicamente, es un esquema orientado a objetos que permite revisar y manipular cada uno de los elementos de una página web. En los navegadores, este modelo es usado desde Javascript para cambiar los elementos de la página.

En nuestro caso, nos interesa usar DOM para actualizar la pantalla con los datos de un arreglo.

Obteniendo un objeto de la página web

Para obtener un elemento de la página web, podemos usar el objeto global document. Este objeto tiene una serie de funciones para buscar elementos. Por ejemplo, es posible usar getElementById() para buscar un elemento usando el atributo id.

Si tenemos una página HTML como la siguiente:

<html> <head> <title>Demo</title> </head> <body> <div id="demo"> Este es un demo. </div> </body> </html>

Es posible obtener el div con el id demo usando getElementById()

var elemento = document.getElementById('demo');

Modificando un objeto de la página web

Es posible modificar el contenido de la página usando los métodos de los elementos DOM. Por ejemplo, si se tiene un div, es posible cambiar su contenido usando la propiedad innerHTML.

var elemento = document.getElementById('demo'); elemento.innerHTML='Hola Mundo';

Desplegando datos en la página web

Este mecanismo puede usarse para desplegar los datos de un arreglo. Si se usa una tabla en HTML, es posible agregar las filas con los datos usando javascript.

Por ejemplo, suponga que tiene la siguiente tabla en HTML:

<html> <head> <title>Demo</title> </head> <body> <table id="tabla"> <thead> <tr> <th>Id</th> <th>Nombre</th> </tr> </thead> <tbody id="cuerpo-tabla"> </tbody> </table> </body> </html>

Es posible agregar el HTML con las filas de la tabla.

var elemento = document.getElementById('demo'); elemento.innerHTML='<tr><td>1</td><td>Bogota</td></tr>';

Desplegando datos de un arreglo en la página web

Con el fin de desplegar los datos de un arreglo, una posibilidad es crear dos funciones: una que retorne el contenido del HTML que debe agregarse a la tabla y otra que busque la tabla e inserte el contenido HTML.

Por ejemplo, teniendo en cuenta el ejemplo del arreglo de ciudades, la siguiente función nos permite generar el HTML correspondiente:

function toHTML( cities ) { var html = ''; for (var i=0; i < cities.lenght; i++) { var city = cities[i]; html += '<tr>' + '<td>' + city.id + '</td>' + '<td>' + city.name + '</td>' + '</tr>'; } return html; }

Otra función puede tomar este HTML e insertarlo en una tabla

function updateTable( tableId, cities ) { var table = document.getElementById(); var html = toHTML(cities); table.innerHTML = html; }

results matching ""

    No results matching ""