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)

El Modelo de Objetos de Documento o DOM, es la interfaz que te permite acceder y manipular, mediante la programación, los contenidos de una página web (o documento). Proporciona una representación estructurada, orientada a objetos, de los elementos individuales y el contenido de una página, con métodos para recuperar y fijar las propiedades de dichos objetos. Además, proporciona métodos para agregar y eliminar dichos objetos, permitiéndote crear contenido dinámico.

El DOM proporciona también una interfaz para trabajar con eventos, permitiéndote capturar y responder a las acciones del usuario o del navegador. Esta carácteristica es cubierta someramente en este tutorial, pero los detalles pueden encontrarse en otro artículo. Para este artículo en particular, la discusión se centrará en la representación DOM de un documento y los métodos que proporciona para acceder a dichos objetos.

Niveles del DOM y Soporte

Primero, una breve lección de historia para situarnos. Cuando JavaScript fué introducido inicialmente en los navegadores, se requería algún tipo de interfaz para permitir el acceso a los elementos en la página  vía scripting. Cada vendedor tenía su propia implementación pero emergieron estándares de facto para producir un modelo bastante simple común para todos.

Por ejemplo, la mayor parte de los navegadores usaban un array de objetos Image para representa todas las etiquetas IMG en una página. Entonces, podía accederse a éstas  y manipularlas vía JavaScript. Un simple rollover de imágenes usaría un código como este:

document.images[3].src = "graphics/button2.gif"

Estos modelos iniciales estaban limitados. Sólo proporcionaban aceso a unos pocos tipos de elementos y atributos, como imágenes, links o formularios.

Cómo los vendedores lanzaron nuevas versiones de los navegadores, expandieron dicho  modelo. Pero estaban en desacuerdo unos con otros con bastante frecuencia, lo que conducía tanto a problemas de compatibilidad entre los diferentes navegadores, como a los vendedores tratando de aventajar a los demás añadiendo sus propias cracterísticas nuevas.

Afortunadamente, la mayor parte de los vendedores empezaron a adoptar el estándar del DOM fijado por el World Wide Web Consortium, notablemente Internet Explorer, Netscape y Opera.

Con el fin de proporcionar cierta compatibilidad hacia atrás, se definieron diferentes niveles del estándar del DOM. Encontrarás referencias al DOM Nivel 0 (o "DOM0") que corresponde al modelo usado por los primeros navegadores scriptables - principalmente Internet Explorer y Netscape anteriores a la versión 4 de cada uno. A continuación está el DOM1 que fué adoptado en 1998 y que cubre algunas de las características introducidas en la versión 4 de los navegadores.

Navegadores Compatibles con los Estándares

Revisa la recomendación W3C DOM2 standard.

La mayoría de los navegadores actuales (versión 5 y superior) soportan el estándar DOM2, o al menos una buena parte de éste. Además, continúan soportando algunas características de los anteriores niveles del DOM, o sus propias extensiones propietaris, por lo que son compatibles con páginas web antíguas.

Este artículo se centrará precisamente en el actual estándar DOM2. Aunque este estándar se aplica a los documentos XML en general(extended markup language), discute cómo el estándar se aplica a HTML en particular (ya que éste es un derivado de XML).

La buena noticia es que, dada la tendencia actual de la industria, puedes esperar que las futuras versiones de los navegadores sigan este estándar. La mala es que, por ahora, vas a encontrar difícil escribir páginas que funcionen tanto con los navegadores viejos como con los nuevos.

Un buen ejemplo es Netscape 6.0, que ha dejado de soportar muchas de las características proprietarias de Netscape 4, como la etiqueta LAYER y su correspondiente objeto Layer. Éstos no están reconocidos en la versión 6 ya que nunca fueron adoptados como parte del estándar. Nótese también que la construcción de Internet Explorer document.all es una característica proprietaria, no es parte de ningún estándar. A pesar de que esté soportada en muchas versiones de IE - incluso en la última versión - no está soportada generalmente por otros navegadores.

Deberías tener en mente que la programación DOM también es indirectamente dependient e de los estándares para HTML y CSS, dado que el DOM refleja las etiquetas y atributos definidos para dichos estándares. También depende de un estándar para JavaScript ya que el DOM es esencialmente una API para client-side scripting.

El Árbol del Documento

Cuando un navegador carga una página, crea una representación jerárquica de sus contenidos que representa, aproximadamente, su estructura HTML. Esto desemboca en una organización parecida a un árbol de nodos, cada uno representando un elemento, un atributo, contenido o algún otro objeto.

Nodos

Cada uno de estos tipos diferentes de objetos tendrá sus propios y únicos métodos y propiedades. Pero cada tipo implementará también la interfaz Node. Esta interfaz es un conjunto común de métodos y propiedades relacionadas con la estructura de árbol del documento. Para comprender mejor esta interfaz, échale un vistazo al diagrama de abajo que representa un árbol de nodos simple.

Sample Node Tree

El objeto Node proporciona varias propiedades que reflejan esta estructura y te permiten recorrer el árbol. Aquí hay algunas relaciones usando el ejemplo anterior:

La interfaz Node también proporciona métodos para añadir, actualizar y eliminar nodos dinámicamente, tales como:

Éstos serán cubiertos más tarde. Pero, de momento, vamos a ver cómo refleja el árbol del documento los contenidos de una página web.

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