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.

La Raíz (Root) Document

El objeto document object sirve de raíz de este árbol de nodos. Implementa también la interfaz Node. Va a tener  nodos hijos pero no tendrá nodo padre ni nodos de su mismo nivel, dado que él es el nodo inicial. Además de ser un Node, también implementa la interfaz Document.

Esta interfaz proporciona métodos para acceder y crear otros nodos en el árbol del documento. Algunos métodos son:

Nótese que, de modo distinto a los otros nodos, sólo hay un objeto document en una página. Todos los métodos anteriores (excepto getElementsByTagName()) pueden utilizarse sólo contra el objeto document, e.d., usando la sintaxis document. methodName().

El objeto document también puede tener otras propiedades relacionadas con el soporte de antiguos niveles del DOM. Por ejemplo, encontrarás que muchos navegadores tienen todavía los arrays document.images y document.links o las propiedades document.bgColor y document.fgColor relacionadas con los atributos BGCOLOR y TEXT de la etiqueta BODY.

Estas propiedades se mantienen con la intención de proporcionar cierta compatibilidad hacia atrás para que páginas diseñadas para navegadores antiguos sigan funcionando apropiadamente con las nuevas versiones. Pueden utilizarse todavía en los scripts pero probablemente no estén soportadas en las versiones futuras.

Recorriendo el árbol del Documento

Como se ha mencionado, el árbol del documento refleja la estructura del código de una  página. Cada etiqueta o par de etiquetas está representada por un nodo elemento con otros nodos representando atributos o datos de carácter (e.d., texto).

Técnicamente hablando, el objeto document tiene sólo un elemento hijo, dado por document.documentElement. Para páginas web, éste representa la etiqueta exterior HTML, y ésta actua como el elemento raíz del árbol del documento. Va a tener los elementos hijos HEAD y BODY que tendrán a su vez otros elementos hijos.

Utilizando ésto, y los métodos de la interfaz Node , puedes recorrer el árbol del documento para acceder a los nodos individuales contenidos en dicho árbol. Considera lo siguiente:

<html>
<head>
<title></title>
</head>
<body><p>This is a sample paragraph.</p></body>
</html>

y éste código:

alert(document.documentElement.lastChild.firstChild.tagName);

que debería mostrar "P", el nombre de la etiqueta representada por dicho nodo. El código se puede descomponer como sigue:

Hay varios problemas obvios para acceder a los nodos de esta forma. Por ejemplo, un simple cambio del código de la página, como agregar texto o elementos con formato o imágenes, cambiará la estructura de árbol. La ruta utilizada anteriormente no apuntará, en ese caso, al nodo intencionado.

Menos obvias son ciertas incompatibilidades entre los navegadores. Nótese que en el ejemplo HTML anterior, no hay espacio entre las etiquetas BODY y P. Si se hubiese añadido simplemente un salto de línea,

<html>
<head>
<title></title>
</head>
<body>

<p>This is a sample paragraph.</p>

</body>
</html>
Prueba la utilidad DOM Viewer de Brainjar.com para navegar de modo interactivo un árbol de documento.

Netscape añadiría un nodo para este dato, mientras que IE no lo haría. Por ésto, en Netscape, el código JavaScript mostrado anteriormente debería devolver "undefined" como su nuevo puntero para el nodo de texto para este espacio en blanco. Como no es un nodo elemento, no tiene la propiedad tagName. IE, por su parte, no agrega nodos para espacios en blanco cómo estos, por lo que todavía apuntaría a la etiqueta P.

Accediendo a los Elementos Directamente

Aquí es donde el método document.getElementById() adquiere utilidad. Mediante la adición de un atributo ID a la etiqueta del párrafo (o cualquier otra etiqueta, para el caso), puedes referirte a ella directamente.

<p id="myParagraph">This is a sample paragraph.</p>

...

alert(document.getElementById("myParagraph").tagName);

De este modo, puedes evitar problemas de compatibilidad y actualizar los contenidos de la página sin tener que preocuparte de dónde está el nodo del párrafo en el árbol del documento. Debemos recordar que cada ID tiene que ser único en una página.

Un método algo menos directo de acceder a los nodos de tipo elemento es proporcionado por document.getElementsByTagName(). Éste devuelve un array de nodos representando todos los elementos en una página que tengan la etiqueta HTML especificada. Por ejemplo, podrías cambiar el color de todos los links en una página con lo siguiente.

var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i++)
nodeList[i].style.color = "#ff0000";

Que actualiza simpemente los estilos inline de cada link fijándo el parámetro color en rojo. Pruébalo try.

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