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.
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.
El objeto Node proporciona varias propiedades que reflejan
esta estructura y te permiten recorrer el árbol. Aquí hay
algunas relaciones usando el ejemplo anterior:
- NodeA
.firstChild= NodeA1 - NodeA
.lastChild= NodeA3 - NodeA
.childNodes.length=3 - NodeA
.childNodes[0]= NodeA1 - NodeA
.childNodes[1]= NodeA2 - NodeA
.childNodes[2]= NodeA3 - NodeA1
.parentNode= NodeA - NodeA1
.nextSibling= NodeA2 - NodeA3
.prevSibling= NodeA2 - NodeA3
.nextSibling=null - NodeA
.lastChild.firstChild= NodeA3a - NodeA3b
.parentNode.parentNode= NodeA
La interfaz Node también proporciona métodos
para añadir, actualizar y eliminar nodos dinámicamente, tales
como:
insertBefore()replaceChild()removeChild()appendChild()cloneNode()
É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.