Este artículo fue actualizado.

Document Object Model, o DOM, o Modelo en Objetos para representar Documentos es una modelo en que los scripts pueden acceder y modificar dinámicamente el contenido, la estructura o los estilos de documentos HTML. A través del manejo del DOM se permiten las actualizaciones en tiempo real de contenidos, envío de formularios asincrónicamente, etc. O sea, es la base del funcionamiento de los rollovers, del onclick, de AJAX.. Se utilizó por primera vez en Netscape Navigator 2.0.

El entendimiento del DOM es la base para entender la programación web.

Aunque el desarrollo del DOM es responsabilidad de la W3C, como todo lo que sale de ahí, ha habido discrepancias en su implementación. Aunque todos los navegadores usan Javascript como lenguaje de programación, los objetos no se comportan de la misma manera, lo que se traducía en diferentes maneras en que había que programar para IE, Netscape, Firefox… (ya no nos bastaba tener que hacer que los estilos funcionaran parecidos entre navegadores… ¡ahora con el DOM tambiém!). Eso lo puedes notar en sitios donde el onclick sólo funciona en IE6 y no en Safari, por ejemplo. Gran ayuda son los frameworks de Javascript, que ponen todos sus esfuerzos en lograr que sus fantásticas funcionalidades sean crossbrowser.

Manipulando Objetos⌗

Objetos en un sitio web tienen propiedades, así como en la vida real una piedra tiene peso, color y textura:

Para el siguiente modelo:

<div id="texto">lorem Ipsum</div>

El objeto puede ser

o su identificador, el id=“texto”. La propiedad puede ser el color del texto, o su tamaño. Juguemos con su color. El valor, será el valor del color en hexacromía:

Objeto.propiedad = valor<br />
Texto.color = #f00;

Usando jQuery:⌗ 

$("#texto").css(color: "#f00");

Usando Mootools:⌗ 

&("#texto").setStyle('color', '#f00');

Manipulando Eventos⌗

Un evento se define cuando alguna situación cambia en el comportamiento del sitio web: cuando se presiona alguna tecla, el click del mouse, la posición del cursor; o sea, la interacción del usuario con el sitio web. Estos eventos también son objetos (que responden a eventos) y se pueden manejar mediante Javascript.

Para el mismo modelo anterior, mediante un MouseOver:

Usando jQuery:⌗ 

$("#texto").mouseover(function() {<br />
     alert("Mouse sobre el div#texto");<br />
});

Usando Mootools:⌗ 

$("#texto").addEvent('mouseover', function() {<br />
     alert("Mouse sobre el div#texto");<br />
});

onLoad v/s onDomReady⌗

Siento que me faltó un importante tópico que tratar en este breve paso por el DOM. Se trata del evento que gatilla las acciones de la página, más precisamente el anticuado onLoad, v/s el moderno onDomReady.

El problema de onLoad es que espera que toooda la página, y toooooodos sus elementos estén cargados para ejecutarse. Su nombre lo dice, cuandoCargue (onLoad). Imagínate: primero cargas el HTML y sus elementos, luego los scripts, las imágenes… puede demorarse un montón. Cuando recién termina todo eso ejecuta algún evento determinado por onLoad.

Aquí es cuando viene al rescate onDomReady. Este evento creado por los frameworks (Mootools y YUI lo tienen implementado) ejecuta sus comandos justo cuando los elementos HTML de la página están renderizados, o sea, justo lo necesario para comenzar a manipularlos como objetos. Genial, mientras aún siguen cargando el resto de las imágenes, swf’s, etc.