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.

Trabajando con Nodos de Tipo Elemento

Agregar y quitar nodos de tipo elemento se hace más o menos igual que con los nodos de texto. La diferencia principal reside en la creación del nodo y la colocación de contenido dentro de éste.

En primer lugar, creas un nodo utilizando document.createElement() pasándole como parámetro el nombre de la etiqueta del elemento que quieras construir tal como P, DIV, TABLE, etc. El parámetro es case-insensitive,(insensible al uso de mayúsculas o minúsculas), así tanto "div", "Div" como "DIV" crearán una etiqueta DIV. Es conveniente resaltar que el navegador devolverá el nombre de la etiqueta en mayúsculas si le preguntamos por éstet, por ejemplo:

var el = document.createElement("div");
alert(el.tagName);

mostraría "DIV".

Como con los nodos de texto, después de crear un elemento necesitas agregarlo a algún elemento existente en el árbol del documento con el fin de poder verlo en la página.

Pero un nuevo elemento recien creado es simplemente una etiqueta vacía. Probablemente querrás añadirle primero algo de contenido, y fijar algunos de sus atributos. De nuevo un ejemplo práctico que ayudará a comprenderlo.

This text is in a DIV element.

Add Paragraph

Aquí, haciendo click sobre el link crearemos un nuevo elemento P - con algunos nodos hijos propios - y lo agregaremos a un elemento DIV ya existente. Echemos un vistazo al código:

<div id="sample1">This text is in a DIV element.</div>

... code for the link ...

var paraEl, boldEl;

paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(
document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text added to the DIV"));

document.getElementById("sample1").appendChild(paraEl);

En primer lugar crea 2 nuevos elementos, una etiqueta P y una etiqueta B. Entonces agrega un nuevo nodo de texto con la cadena "This is a new paragraph with " a la etiqueta del párrafo. Hace lo mismo con la etiqueta B, agregándole el texto "bold". A continuación, añade dicha etiqueta B (y su nodo de texto hijo) al párrafo. Otro nuevo nodo de texto con la cadena " text added to the DIV" es agregado al párrafo.

En este punto el elemento párrafo tiene tres hijos, un nodo de texto, un nodo elemento para la etiqueta B y otro nodo de texto. El elemento B tiene un hijo, un nodo de texto. El paso final es insertar el nuevo elemento párrafo dentro de la etiqueta DIV existente en la página.

También podríamos haber fijado cualquier atributo de cada nuevo elemento. No habría ninguna diferencia entre fijar los atributos de un elemento antes o después de haberlo agregado al árbol de nodos. Por ejemplo, tanto

boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);

como

paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";

convertirían el texto en negrita en rojo. En otras palabras, appendChild() coloca el propio nodo dentro del árbol, no una copia de éste, y la variable boldEl continuará apuntando a él.

Conclusión

Hay muchas más cosas sobre el Modelo de Objetos de Documento de las que han sido cubiertas aquí. Los estilos agregan una dimensión completamente nueva a la presentación del contenido y los eventos proporcionan un modo de hacer que las páginas sean interactivas con el usuario. Pero estos tópicos son dignos de su propia discusión.

Por ahora, trata de experimentar con lo que aquí ha sido cubierto. Familiarízate con el árbol del documento y los métodos que proporciona para navegarlo y para manipular tipos de nodos diferentes. Ésto te dará un fundamento sólido para tratar con otras características del DOM.

Prev

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