Javascript: DOM

Hasta ahora hemos estado viendo el núcleo de Javascript, que es independiente de si se ejecuta en servidor o en el cliente. Ahora vamos a ver una serie de objetos definidos para el uso de Javascript del lado del cliente, utilizando navegadores web.

Los navegadores con soporte para Javascript nos proporcionan un API (Application Program Interface o Interfaz para programas de aplicación) que nos permita interactuar con el mismo, y con los documentos que se encarga de renderizar.

Basicamente tenemos un objeto window, con una serie de propiedades y métodos para la interacción con el navegador y un objeto document, propiedad también de window, con propiedades y métodos para la interacción con el documento, formando una jerarquía que define la API.

Los objetos que tenemos por debajo del objeto document en la la jerarquía y sus métodos y propiedades, definen una API llamada DOM, de Document Object Model o Modelo de Objetos del Documento, que según nos sugiere su nombre modela el documento como un conjunto de objetos, con sus propiedades y métodos y con los que podemos iteractuar. La API DOM puede manipular documentos XML, no solo XHTML y se suele acceder a esta utilizando Javascript, aunque no debemos confundir DOM con Javascript, ya que también se puede utilizar DOM en otros lenguajes como Java o C++.

Tenemos 4 niveles DOM por ahora. DOM nivel 0 fue el primero, creado por Netscape y que se incluyó por primera vez en Netscape 2, permitía el acceso a imágenes, enlaces y campos de formularios. IE cuya cuota de mercado era mucho mas baja que la de Netscape por aquellos días tuvo que adaptarse y por ello DOM Nivel 0 se estableció un estándar de facto. Más tarde, cuando comenzo la guerra de los navegadores en las versiones 4 y comenzó el auge de DHTML (Dinamic HTML) cada uno propuso un modelo diferente de acceder a los elementos, con lo que nos encontramos con dos DOMs completamente incompatibles y aumento de trabajo para los desarrolladores web en su intento de dar soporte a ambos (por supuesto había mas diferencias, pero no vienen al caso). Fue entonces cuando el W3C propuso un estándar, DOM nivel 1, en el que accedemos a un elemento através del método getElementById del objeto document y que es soportado por IE 5+ y Netscape 6. Pero mientras que Netscape se olvidó de su antiguo DOM (que usaba document.layers), IE no dejó de dar soporte a su implementación (en el que se accede a cada elemento a través de una matriz asociativa, document.all). Veamos como se accedería a un elemento con id miElemento usando el modelo propietario de IE y DOM Nivel 1:

//DOM Nivel 1
document.getElementById('miElemento');
//IE
document.all['miElemento'];

DOM Nivel 1 se divide en Dom Nivel 1 núcleo y DOM Nivel 1 HTML. En el núcleo está definida toda la funcionalidad referida a documentos XML; DOM HTML se apoya en el núcleo para definir la funcionalidad relativa a la interacción con documentos HTML.

El estándar ha seguido evolucionando, con lo que ahora tenemos también DOM Nivel 2, soportado completamente por IE y Firefox (no así Opera) y DOM Nivel 3 soportado casi completamente por IE y Firefox (Opera casi 0%).

En el nivel 2 la especificación divide DOM en DOM Nivel 2 Núcleo y DOM Nivel 2 HTML, que son similares a DOM Nivel 1 además de las vistas, que especifica una API para el acceso y modificación de las vistas de un documento de forma dinámica; estilo, un API para el acceso y modificación de las hojas de estilo de forma dinámica; eventos, un API para el acceso a los eventos del documento y navegación y rango, que nos permite navegar de forma dinámica por el documento e identificar un rango de contenido en el documento.