Posicionamiento Dinámico (I)

Entendemos por posicionamiento dinámico la capacidad de situar un elemento en cualquier posición
de la página dependiendo de unas coordenadas, y no de la situación relativa del elemento respecto al
resto de elementos de la página. Esta funcionalidad se adquiere mediante los estilos, y concretamente
utilizando los atributos position, top, left y z-index a los valores de estilo que se deseen.

Otras novedades que aporta DHTML a través de ejemplos

Vamos a ver algunos ejemplos de funcionamiento de las posibilidades de Posicionamiento Dinámico,
Filtros, Descarga de Tipos de Letra (Font Download) y Enlaces de datos.

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (IV)

Podemos ver que el mecanismo utilizado aquí es ligeramente diferente, ya que los elementos se crean
invocando los nombres estándar de cada objeto por su definición HTML: TABLE, TBODY, TR y TD.
Una vez creados, es preciso asignarlos un lugar dentro del árbol jerárquico, lo que se consigue
mediante el método appendChild (añadir nodo hijo), siguiendo el orden natural de la estructura de la
tabla: primero se añade la tabla al objeto body del documento, después el objeto oTBody a la tabla, a
continuación se le añade el objeto oFila, y finalmente, se añaden las dos celdas a la fila. Para concluir,
como las celdas están vacías por defecto, se les asigna un valor.
Sin embargo hay un cambio más respecto al modo de trabajo anterior: no hemos asignado ningún
formato a la tabla ni a las filas, por lo que el borde de la tabla será 0, y sólo se visualizarán los
contenidos (“Celda 1”, “Celda 2” y “Celda 3”), sin ver la tabla que los contiene. Si queremos repetir la
situación que hemos creado antes, dando un borde a la tabla y asignándole un color de fondo, tenemos
que crear esos atributos explícitamente, o bien copiarlos a partir de los atributos asignados a otro
objeto similar.
Por ejemplo podríamos hacer que nuestra tabla oTabla, heredara los atributos de la primera tabla
utilizando el método mergeAttributes, que tienen casi todos los objetos. Bastaría una sola línea de
código para que la tabla tuviera borde igual a 1, y color azul.

oTabla.mergeAttributes(Tabla)

Código fuente 24
Esto significa que cualquier elemento puede ser destruido o creado a partir de código fuente y como
respuesta a un evento de usuario y/o sistema.

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (III)

Obtenemos la ventana de la Figura 20, donde se ven los elementos <TBODY> enmarcando al resto de
la tabla creada.

Sin embargo, para crear una tabla dinámica mediante DOM, debemos crear explícitamente los
elementos <TBODY>, si no queremos que los resultados sean impredecibles. El código
correspondiente al mismo procedimiento mediante DOM sería el que muestra el Código fuente 23.

Dim oTabla, oTBody, oFila, oCelda, oCelda2, oCelda3
Set oTabla =document.createElement("TABLE")
Set oTBody =document.createElement("TBODY")
Set oFila =document.createElement("TR")
Set oCelda =document.createElement("TD")
Set oCelda2=oCelda.cloneNode() 'Crea una nueva celda a partir de la anterior
Set oCelda3=oCelda.cloneNode() 'Crea una nueva celda a partir de la anterior
document.body.appendChild(oTabla)
oTabla.appendChild(oTBody)
oTBody.appendChild(oFila)
oFila.appendChild(oCelda)
oFila.appendChild(oCelda2)
oFila.appendChild(oCelda3)
oCelda.innerHTML="Celda 1"
oCelda2.innerHTML="Celda 2"
oCelda3.innerHTML="Celda 3"

Código fuente 23

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (II)

Analicemos la secuencia de comandos de VBScript:
En la variable sTable, se asigna primeramente la definición básica de la tabla y se añade al contenido
del documento (propiedad innerHTML). Desde ese momento, el objeto tabla puede ser referenciado
mediante su nombre: Tabla3. Utilizando los métodos insertRow e insertCell, añadimos a la estructura
las correspondientes marcas <TR> y <TD>, mientras que las colecciones rows y cells nos dan acceso
al contenido de las filas y celdas y a sus valores dinámicos (length nos indica el número de celdas,
etc).
Si asignamos este código al evento Load del documento (puede ser cualquier otro), cuando
visualicemos la página, veremos que en la parte inferior aparece la nueva tabla (Tabla 3), tal y como
ha sido definida, con la particularidad de que DOM ha construido para nosotros un elemento
<TBODY> que no habíamos creado expresamente, ya que al solicitar el código fuente mediante una
caja de mensaje tal y como vemos en el Código fuente 22.

Msgbox oTable1.outerHTML

Código fuente 22

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (I)

En el caso de las tablas, esto significa que debe de contener un elemento <TBODY> dentro del
elemento <TABLE>. El Código fuente 21 crea una tabla nueva al final de documento, conteniendo 3
celdas cuyo contenido son los textos “Celda 1”, “Celda 2” y “Celda 3”, utilizando el modelo DHTML:

Dim sTable
sTable ="<TABLE Border='1' ID='Tabla3'></TABLE>"
document.body.innerHTML=document.body.innerHTML & sTable
Tabla3.insertRow(oTable1.rows.length)
Tabla3.rows(0).insertCell(oTable1.rows(0).cells.length)
Tabla3.rows(0).insertCell(oTable1.rows(0).cells.length)
Tabla3.rows(0).insertCell(oTable1.rows(0).cells.length)
Tabla3.rows(0).cells(0).innerHTML="Celda 1"
Tabla3.rows(0).cells(1).innerHTML="Celda 2"
Tabla3.rows(0).cells(2).innerHTML="Celda 3"

Código fuente 21

Una vista jerárquica del modelo de objetos DOM (III)

Tenemos, pues, una jerarquía híbrida de cara al programador, que permite acceder a los elementos
mediante varios métodos. Aquí nos centraremos, sobre todo, en el modelo de objetos de documento
(DOM), que constituye una evolución consistente del modelo DHTML, y que se encuentra disponible
en la versión de Internet Explorer 5.0 y posteriores.
Parece sólito comentar aquí las ventajas del modelo DOM respecto al anterior. Entre otras cosas, un
programador puede:
• Mover una parte del árbol de documento a otra sin destruir ni recrear el contenido.
• Crear elementos nuevos y asignarles a cualquier parte del árbol de documento.
• Organizar y manipular ramas nuevas o ya existentes, antes de insertar nuevos objetos en la
estructura.
• Más todas las posibilidades añadidas al modelo de Hojas de Estilo en Cascada (CSS1 y
CSS2).
Al conjunto de propiedades y métodos específicos de DOM, se le conoce como Interfaz de DOM. En
la Tabla 3 se listan algunos de los más importantes.

 

Se ha comentado que este conjunto de extensiones del primitivo DHTML permite, por ejemplo, la
creación de elementos dinámicos (en tiempo de ejecución) como respuesta a eventos. Pongamos un
ejemplo basado en la construcción de una tabla nueva a partir de nuestra página web básica utilizando
ambos modelos, para ver las diferencias. Para evitar problemas en la creación de tabla, debemos
utilizar lo que se denomina HTML bien formado, es decir aquel que sigue –lo más estrictamente
posible- las especificaciones de HMTL tal y como se recomiendan por la W3C.

Una vista jerárquica del modelo de objetos DOM (II)

Supongamos, que queremos saber cuantas tablas tiene un documento. Siguiendo este razonamiento
podemos obtener esos datos a partir de dos mecanismos distintos, el soportado por DHTML y el
aportado por DOM mediante métodos.
En el primer caso, la colección all, del objeto body nos permite el acceso directo al dato a través de su
propiedad tags mediante el Código fuente 19.
Msgbox document.body.all.tags("TABLE").length ‘Devuelve un 2
Código fuente 19
Mientras que también lo podemos hacer a través de su propiedad getElementsByTagName, con una
sintaxis similar a la que muestra el Código fuente 20.
Msgbox document.getElementsByTagName("Table").length ‘Devuelve un 2, igualmente
Código fuente 20

Una vista jerárquica del modelo de objetos DOM (I)

Al principio, puede ser útil para hacerse una idea del funcionamiento de DOM, crear gráficamente el
modelo de objetos que se genera a partir de una página simple. El gráfico de la figura adjunta
representa dicho esquema partiendo del documento que nos sirve de ejemplo. Nótese que en el
esquema se representan todas las etiquetas como descendientes del propio documento HTML,
representado aquí mediante el nodo o elemento document, que hace las veces de nodo raíz. Todos los
otros nodos o elementos son descendientes de document, destacando, igualmente, documentElement,
que corresponde con la marca <HTML>, que contiene al resto del documento.
Una vez creada la jerarquía de objetos de DOM para un documento dado, DOM expone al
programador una serie de métodos pertenecientes a los objetos predeterminados que permiten el
acceso a cualquier otro elemento de la jerarquía, siguiendo diferentes criterios de necesidad.
Por ejemplo, hasta ahora hemos visto como se accede a elementos basándonos en que éstos sean los
elementos seleccionados por el usuario, pero podemos utilizar otros mecanismos de aproximación,
como las colecciones predeterminadas o los métodos de acceso GetElementsByID,
GetElementsByTagName y GetElementsByName.
En el caso de las colecciones predeterminadas el acceso estaba presente desde la primera
implementación del modelo, mientras que los métodos citados derivan del modelo posterior de DOM.

La propiedad document (VII)

Por tanto, vemos que todo depende del objeto document, y que la jerarquía está estructurada
dependiendo de él. Concretamente, y ya que todo el documento HTML tiene una estructura de árbol,
siempre existirá un nodo raíz o principal, que en éste caso, será la propia etiqueta HTML. Ese
elemento principal, aparece en la referencia del modelo de objetos como una propiedad del objeto
document, llamada documentElement (el lector tendrá que ser cuidadoso a la hora de nombrar los
elementos dentro de su código fuente, pues dependiendo del lenguaje utilizado tales objetos pueden no
ser reconocidos en los lenguajes que diferencian entre mayúsculas y minúsculas, como es el caso de
Javascript). A lo largo del libro, nos referiremos a los objetos nombrándolos de acuerdo a su sintaxis
exacta.
De acuerdo con esto la línea de código document.documentElement.outerHTML, mostraría íntegro
todo el contenido de una página web (etiquetas incluidas), como puede verse en la Figura 18. De todas
formas, la mayor parte de las veces no es necesario acceder al contenido íntegro de la página,
resultando más útil acceder a porciones concretas del documento. Una vez más, no hay más que seguir
el modelo de objetos para averiguar el procedimiento a seguir.

La propiedad document (VI)

Además de éstas dos, existe una propiedad innerText, que muestra los contenidos de cualquier
etiqueta, pero excluyendo todas las etiquetas, y no sólo las que definen el elemento seleccionado. Esto
significa que un nuevo cambio a nuestro código fuente (document.activeElement.innerText),
produciría las siguientes salidas:
Para una tabla (Figura 16)

La propiedad document (V)

La propiedad innerHTML, muestra el contenido de cualquier elemento y tiene una homónima, outerHTML, que hace lo mismo, pero incluyendo las propias etiquetas del elemento. Eso quiere decir que si cambiamos según esto la propiedad en el código fuente, (document.activeElement.outer- HTML), al seleccionar la misma celda anterior la salida sería la que muestra la Figura 15.

La propiedad document (IV)

Y si pulsamos en cualquier otra parte del documento, obtendremos el contenido de su elemento
contenedor, esto es, el contenido de <BODY> en este caso (Figura 14)