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

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.

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.

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.

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

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