La invención de Ja­va­S­cri­pt a mediados de los años noventa marcó un punto de inflexión decisivo en la tra­ye­c­to­ria de la World Wide Web. Hasta ese momento solo se de­sa­rro­lla­ban sitios web estáticos. Sin embargo, gracias a los elementos concretos que incluye este famoso lenguaje de pro­gra­ma­ción, se han ido de­sa­rro­lla­n­do proyectos web cada vez más dinámicos. Los pro­gra­ma­do­res de na­ve­ga­do­res re­s­po­n­die­ron mediante la apli­ca­ción de in­té­r­pre­tes adecuados y el diseño de modelos propios para HTML dinámico (DHTML). Estas in­te­r­pre­ta­cio­nes y modelos pe­r­mi­tie­ron extensas mo­di­fi­ca­cio­nes es­tru­c­tu­ra­les y de diseño en el documento web durante la vi­sua­li­za­ción en el ex­plo­ra­dor, lo que permitió apro­ve­char todo el potencial de Ja­va­S­cri­pt.

Puesto que no llegaron a ponerse de acuerdo sobre las diversas técnicas, los de­sa­rro­lla­do­res web que ofrecían su proyecto dinámico para todos los na­ve­ga­do­res tuvieron que hacer un esfuerzo co­n­si­de­ra­ble. Por ello, en 1998 el Consorcio World Wide Web (W3C) publicó la primera es­pe­ci­fi­ca­ción del Document Object Model (DOM), que hasta la fecha desempeña un papel fu­n­da­me­n­tal en la pro­gra­ma­ción de Ja­va­S­cri­pt como interfaz universal.

¿Qué es Document Object Model (DOM)?

Document Object Model (en ca­s­te­llano modelo en objetos para la re­pre­se­n­ta­ción de do­cu­me­n­tos), abreviado como DOM, es una interfaz de pro­gra­ma­ción es­ta­n­da­ri­za­da para la es­tru­c­tu­ra­ción de do­cu­me­n­tos HTML y XML. Fue de­sa­rro­lla­do y publicado por el Consorcio World Wide Web (W3C), que a su vez fue fundado en 1994 por el inventor de la web Tim Berners-Lee, para el diseño y el es­ta­ble­ci­mie­n­to de es­tá­n­da­res para la World Wide Web.

El objetivo del Document Object Model es facilitar al máximo a los pro­gra­ma­do­res el acceso a los co­m­po­ne­n­tes de un proyecto web para que puedan añadir, eliminar o editar contenido, atributos y estilos. DOM sirve como un enlace de lenguaje neutro e in­de­pe­n­die­n­te de la pla­ta­fo­r­ma entre lenguajes de pro­gra­ma­ción como Ja­va­S­cri­pt y el documento web su­b­ya­ce­n­te mediante la re­pre­se­n­ta­ción del documento en una es­tru­c­tu­ra de árbol en la que cada nodo es un objeto in­de­pe­n­die­n­te y co­n­tro­la­ble. Debido a esta es­tru­c­tu­ra, un proyecto web re­pre­se­n­ta­do de esta manera también se denomina dom tree.

Nota

A di­fe­re­n­cia de lo que sugiere el nombre, DOM no es un modelo, sino una interfaz de pro­gra­ma­ción, tal como ya hemos me­n­cio­na­do. Sin embargo, un Document Object Model puede co­n­si­de­rar­se en sentido figurado un modelo de acceso a los datos web vi­sua­li­za­dos como objeto.

¿Dónde y cuándo se utilizan los dom tree?

El Document Object Model se de­sa­rro­lló para su uso en la World Wide Web y es donde se sigue uti­li­za­n­do pri­n­ci­pa­l­me­n­te. Más co­n­cre­ta­me­n­te, los na­ve­ga­do­res que permiten a los usuarios acceder a las ofertas de la web son los que hacen uso de la interfaz es­ta­n­da­ri­za­da:

De este modo, los clientes web ha­bi­tua­les utilizan las in­te­r­fa­ces DOM o basadas en DOM para convertir páginas HTML o XML activas. En este proceso, cada uno de los co­m­po­ne­n­tes se agrupa en un nodo y estos se organizan en un dom tree. En paralelo, el navegador co­rre­s­po­n­die­n­te carga la versión co­n­ve­r­ti­da del documento web en el disco duro local con el fin de ana­li­zar­lo o pro­ce­sar­lo y, fi­na­l­me­n­te, poder presentar la página en la forma que desea el de­sa­rro­lla­dor. Los na­ve­ga­do­res utilizan distintos motores para la co­n­ve­r­sión (software de re­n­de­ri­za­do) como Gecko (Firefox), Webkit (Safari) o Blink (Chrome, Edge, Opera), que también se basan en el estándar DOM.

z0HN-fG6oT4.jpg Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.

Document Object Model sigue siendo relevante como pre­se­n­ta­ción de un documento web basada en objetos después de la vi­sua­li­za­ción, como interfaz para todo tipo de contenido dinámico pro­gra­ma­do y, por lo tanto, para cualquier clase de in­ter­ac­ción del usuario, que puede cambiar el diseño de la página durante la vi­sua­li­za­ción.

Nota

El consorcio W3C introdujo en 2012 una interfaz especial llamada Shadow DOM como uno de los cuatro pilares de los co­m­po­ne­n­tes web. Esto permite ampliar el Document Object Model real de un documento web a voluntad mediante ra­mi­fi­ca­cio­nes in­de­pe­n­die­n­tes (shadow trees). Más in­fo­r­ma­ción sobre el tema Shadow DOM en el enlace del siguiente artículo.

¿Cómo es la es­tru­c­tu­ra de Document Object Model?

Los ma­r­ca­do­res HTML definen las re­la­cio­nes entre las distintas etiquetas que contiene. Por ejemplo, los elementos marcados en un día en un documento web se cla­si­fi­can por encima o por debajo en función del papel que de­sem­pe­ñan en el proyecto web. Además, algunas etiquetas pueden estar incluidas en otras. Para trasladar ade­cua­da­me­n­te la jerarquía al Document Object Model, la interfaz utiliza la es­tru­c­tu­ra de árbol antes me­n­cio­na­da, que hace posible organizar los objetos re­n­de­ri­za­dos en co­n­se­cue­n­cia.

La es­tru­c­tu­ra precisa de un dom tree siempre dependerá del documento HTML o XML su­b­ya­ce­n­te. En el primer tipo de documento, se respeta la jerarquía básica en todo el proyecto:

Imagen: Jerarquía básica DOM para documentos HTML
Los objetos del Document Object Model mínimo reflejan la es­tru­c­tu­ra básica en HTML.

Como en la es­tru­c­tu­ra básica HTML, el objeto HTML está en el primer lugar dentro del orden je­rá­r­qui­co. Por debajo se en­cue­n­tran la cabecera (header) y el cuerpo (body) del sitio web. Este último debe contener al menos un párrafo (sección con contenido de texto).

Nota

Cada uno de los elementos del dom tree se denomina nodo. Además, cabe di­s­ti­n­guir entre los nodos de elemento como los me­n­cio­na­dos an­te­rio­r­me­n­te (HTML, cuerpo, cabecera u objetos de párrafo), los nodos atributo como align o size y los nodos de texto.

Document Object Model: ejemplo práctico (incluye código HTML)

Una vez ana­li­za­dos de­ta­lla­da­me­n­te, el fu­n­cio­na­mie­n­to y la es­tru­c­tu­ra general del Document Object Model en las secciones an­te­rio­res, nos gustaría terminar ilu­s­tra­n­do en qué consiste la técnica básica de es­tru­c­tu­ra­ción para los lenguajes de pro­gra­ma­ción web. Uti­li­za­re­mos como base el siguiente documento simple en HTML con cabecera y enlace a hoja de estilo CSS y cuerpo, así como dos elementos de contenido (imagen y texto):

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <p><strong>Hallo Welt!</strong></p>
        <div><img src="bild.jpg"></div>
    </body>
</html>

El dom tree generado a partir de este código HTML tiene la siguiente es­tru­c­tu­ra:

Imagen: Representación gráfica de un dom tree
El elemento HTML ocupa el primer lugar en el orden je­rá­r­qui­co de un documento web.

El ejemplo de Document Object Model que hemos utilizado también lo puedes encontrar reflejado en el siguiente formato:

DOCTYPE: HTML
HTML
----head
-  ---- meta
-  ---- link
-  ---- title
----body
-  ---- p
-    ---- strong
-      ---- TEXT: ¡Hola, mundo!
-  ---- div
-    ---- img
Ir al menú principal