Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :
El Modelo de Ojetos de Documento (DOM)
- Introducción
- ¿Qué es el DOM?
- Compatibilidad entre los DOMs
- El DOM según Netscape
- Acceso a los elementos del modelo
1. Introducción
La programación orientada a objetos se ha popularizado enormemente en los últimos días, y ya resulta difícil encontrar lenguajes de programación que no tengan una versión o que no estén basados en esta filosofía.
JavaScript no se queda al margen de esta tendencia, y aunque no permite dos de las características clásicas de los lenguajes orientados a objetos (ni la herencia ni el polimorfismo), sí permite la creación y manipulación de objetos sencillos, y la definición de métodos y propiedades para dichos objetos.
Sin embargo, lo que verdaderamente nos interesa conocer de un lenguaje de scripts como JavaScript, es el Modelo de Objetos de Documento (DOM, Document Object Model). El DOM es el conjunto de objetos predefinidos que nos permite acceder a todos los elementos de una página y a ciertas características específicas del navegador. Vamos a intentar arrojar luz sobre el oscuro DOM.
2. ¿Qué es el DOM?
El DOM es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador, así como otras características del proceso de navegación (como son el historial, el tamaño de la ventana de navegación o el contenido de la barra de estado del navegador). Si no se está familiarizado con la programación orientada a objetos, el concepto de objeto puede resultar algo difuso. Un objeto es, en el fondo, un conjunto de variables y funciones que actúa sobre dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se realiza mediante una interfaz bien definida que aisla al programador de la necesidad de conocer cómo están implementadas internamente dichas funciones. De este modo, la programación orientada a objetos resulta muy intuitiva, y más próxima al conocimiento humano.
Veamos un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de diálogo utilizamos:
window.alert("¡Hola mundo!")
Si bien no conocemos como funciona internamente la función alert(), sabemos cómo invocarla. La abstracción es tal que nos basta con saber que se trata de una función del objeto window. A estas funciones se las llama métodos, y a las variables propiedades.
3. Compatibilidad entre los DOMs
Aunque puede parecer paradigmático, actualmente no existe una gran diferencia entre el soporte de JavaScript que ofrecen los fabricantes de los dos navegadores dominantes, Netscape Navigator y Microsoft Internet Explorer. Lo que verdaderamente les diferencia es el Modelo e Objetos de Documento que incorporan.
De hecho, el DOM podría considerarse algo independiente del propio lenguaje de scripts. Esta es la idea recogida en el esfuerzo del W3C (World Wide Web Consortium) por obtener un estándar par el Modelo de Objetos de Documento. El estándar, que está aún en desarrollo, se divide en 3 partes:
- DOM Nivel 1 Core (definiciones fundamentales)
- DOM Nivel 1 HTML
- DOM Nivel 1 XML
Si este estándar triunfa y tanto Netscape como Microsoft se adhieren a él, el futuro de los scripts para la red será mucho más diáfano, al desaparecer las incompatibilidades entre los diferentes navegadores (pensemos, por ejemplo, en lo costoso que resulta realizar diferentes versiones de un mismo código para que sea ejecutable por todos los navegadores).
4. El DOM según Netscape
El Modelo de Objetos de Documento que propone Netscape en sus versiones 4.x del Navigator resultaba suficiente cuando el DHTML era sólo una idea. Sin embargo, ahora que es ya una realidad, el DOM de IE 4.x/5.x de Microsoft resulta mucho más potente y versátil. No debe extrañarnos, por tanto, que el futuro estándar del W3C se aproxime al de Microsoft. La futura nueva versión del Navigator (bautizca como Netscape 6) soportará el DOM estándar del W3C.
Realmente el DOM del Navigator 4.x es un subconjunto del DOM del IE 4.x/5.x. Esto es lo que hace que el Navigator presente limitaciones importantes en su capacidad de acceder a ciertos elementos de una página y de modificar sus propiedades.
El siguiente esquema muestra el DOM del Netscape Navigator 4.x:
Para establecer una comparación, mostramos a continuación el DOM de Microsoft (aunque sólo hasta un segundo nivel). En este esquema hemos marcado los objetos comunes con Netscape en color verde, y los que sólo soporta Netscape en azul.
5. Acceso a los elementos del modelo
Para acceder a una propiedad de un objeto del modelo se utiliza la siguiente nomenclatura:
nombre_objeto.nombre_propiedad
Para acceder a un método, se utiliza una sintáxis similar:
nombre_objeto.nombre_metodo()
Entre paréntesis se le pasan al método los argumentos necesarios para su ejecución. Un objeto de JavaScript es, básicamente un array. Esto quiere decir que es posible acceder a las propieades del objeto utilizando también la sintáxis siguiente:
nombre_objeto["nombre_propiedad"]
Si observamos el DOM de la figura anterior, todos los objetos dependen jerárquicamente del objeto window. Para acceder al objeto document, sería necesario usar siempre la sintaxis window.document. Sin embargo, en JavaScript el objeto window es el objeto por defecto, de modo que puede omitirse.
