Introducción al Modelo de Objetos de Documento (DOM) 

Autor Original:Mike Hall URL ORIGINAL : http://www.brainjar.com/dhtml/intro/ TÍTULO ORIGINAL : Introduction to the Document Object Model Traducción al castellano:Pedro Palazón Candel URL CASTELLANO : http://kusor.net/traducciones/brainjar.es/introdom1.es.html

Introducción al Modelo de Objetos de Documento (DOM)

Revisa la recomendación W3C DOM2 standard.

Usando las técnicas que hemos discutido, podrías ser muy poco peligroso. Has visto como puedes acceder y alterar dinámicamente algunas propiedades o parámetros de estilo de un elemento en una página.

Pero, ¿qué hay de agregar y manipular dinámicamente elementos y contenido? ¿Y cambiar el contenido en sí mismo?

Contenido Dinámico

Cambiar contenido textual es relativamente simple. Cada cadena contínua de datos de carácter en el cuerpo de una página HTML es representada por un nodo de texto. El valor de la propiedad nodeValue de estos nodos es el texto en sí mismo. Cambiando dicho valor, cambiaremos el texto en una página.

Nodos de Texto

Aquí hay otro ejemplo usado una simple etiqueta P. Utiliza los links para cambiar el texto:

This is the initial text.

Change Text 1 | Change Text 2

Ahora veamos el código que hay detrás de ésto:

<p id="sample1">This is the initial text.</p>

... code for the links ...

document.getElementById('sample1').firstChild.nodeValue =
'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue =
'...in a galaxy far, far away';

Hay unas cuantas cosas importantes que debemos resaltar aquí. La primera, los nodos de texto no tienen un atributo ID como pueden tenerlos los nodos elementos. Por lo tanto, no podemos acceder a ellos directamente usando métodos como document.getElementById() or document.getElementsByTagName().

En su lugar, el código hace referencia al texto usando su nodo padre, en este caso es el elemento párrafo con un ID "sample1". Este nodo elemento tiene un nodo hijo, el nodo textoque queremos actualizar. Puedes verlo en el diagrama siguiente.

Simple Node Tree

Así document.getElementById('sample1').firstChild.nodeValue se ha utilizado para acceder a este nodo de texto y leer o fijar su valor de cadena.

Es importante recordar que los nodos de texto contienen justamente eso, texto. Cualquier etiqueta de marcado simple como B o I dentro de una cadena de texto creará un sub-árbol de elemento y nodos texto. Por ejemplo, usando el ejemplo anterior y agregando etiquetas para poner en negrita la palabra "initial":

<p id="sample2">This is the <b>initial</b> text.</p>

tendremos que el árbol del elemento párrafo "sample2" tienen tres hijos en lugar de uno. Hay un nodo texto para "This is the ", un nodo elemento para el par de etiquetas B y un nodo texto para " text.". El nodo para el elemento B element tiene un nodo hijo, un nodo de texto para "initial". Puedes ver la estructura en el diagrama que sigue.

Less Simple Node Tree

Para ver como afecta ésto al código del script, aquí está el mismo ejemplo utilizado más arriba pero con el marcado adicional para la negrita:

This is the initial text.

Change Text 1 | Change Text 2

Cambiar firstChild del elemento  P ahora sólo afecta al texto "This is the ". Coloquialmente hablando, si intentas agregar marcado al valor de un nodo de texto, el navegador lo va a tratar como texto plano, como se ha demostrado debajo:

This is the initial text.

Change Text 1 | Change Text 2

Donde el código del link se ha modificado como sigue:

document.getElementById('sample3').firstChild.nodeValue =
'<b>Once</b> upon a time...';
document.getElementById('sample3').firstChild.nodeValue =
'...in a galaxy <i>far, far</i> away';

Puedes eludir problemas como este pensando en los nodos de texto como cadenas individuales de datos de carácter localizados entre cualquiera dos etiquetas HTML, no necesariamente entre la primera pareja de etiquetas.

La Propiedad innerHTML

Internet Explorer introdujo la propiedad innerHTML para los nodos elemento. Representa los datos de carácter entre las etiquetas iniciales y final de un elemento, incluyendo otras etiquetas HTML. Netscape 6 ha adoptado esta propiedad, aún cuando no es parte del estándar actual del DOM.

Utilizando esta característica, podrías reemplazar la totalidad del contenido del elemento párrafo del ejemplo anterior, incluyendo el marcado HTML, usando algo como:

document.getElementById('sample4').innerHtml =
"<b>Once</b> upon a time...";

Y puedes ver el efecto por ti mismo, si estás utilizando un navegador que lo soporte:

This is the initial text.

Change Text 1 | Change Text 2

Aunque manejable, ten en mente que no es parte del estándar, por lo que utilizalo bajo tu propio riesgo .

Añadiendo Nodos

Los Nodos se pueden agregar también al DOM. Acabas de ver como los nodos atributo pueden ser creados y aplicados a un elemento, y ahora vamos a ver cómo agregar nodos elemento y nodos texto al árbol del documento (sin utilizar la propiedad innerHTML).

Prev | Next

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.
Valid HTML |Valid CSS