Qué es DOM y cuál es su estructura

El desarrollo web cada vez tiene más importancia dado al uso masivo de internet que se realiza en la actualidad. Particulares y empresas utilizan la web a diario para realizar actividades y acciones utilizando para ello páginas web que cada vez son más sofisticadas y ofrecen un mayor número de funciones. La evolución de los sitios webs hasta el estado actual ha sido posible gracias a protocolos, lenguajes y patrones como CSS, HTML, XML o DOM.

A continuación veremos qué es DOM, cuáles son sus ventajas y cómo se estructura y funciona para servir de estándar a los desarrolladores web. 

Qué es DOM y para qué sirve

DOM (document object model) es una interfaz de programación de aplicaciones (API) que forma la base para el desarrollo de documentos HTML y XML. DOM define la estructura lógica de los documentos web y el modo en el que se manipula y accede a los mismos.

La API de DOM está relacionada con HTML o JavaScript, pero es independiente de cualquier lenguaje de programación (estando disponible para los lenguajes de desarrollo web más utilizados).

La W3C o World Wide Web Consortium cuenta con un grupo llamado Web Platform Working Group que es quien define cómo debe funcionar DOM en navegadores y buscadores. A lo largo del tiempo DOM ha ido mejorando, añadiendo nuevas funcionalidades como la manipulación de eventos o la serialización. Actualmente se sigue mejorando el DOM nivel 4 para conseguir que el desarrollo web permita crear webs más avanzadas, seguras y con muchas más funciones.

Las distintas versiones de DOM a lo largo de la historia han sido:

• DOM nivel 1, publicada en 1998.
• DOM nivel 2, publicada en 2000.
• DOM nivel 3, publicada en 2004.
• DOM nivel 4, actualmente en desarrollo.

Cuáles son sus ventajas

DOM proporciona una serie de beneficios a la hora de programar y trabajar con páginas web entre las que podemos destacar:

Ofrece un estándar de programación

Una de las metas principales del modelo DOM es la de proporcionar una interfaz estándar de programación que pueda utilizarse en distintos entornos y aplicaciones (sin necesidad de librerías u otras dependencias).

Control sobre la estructura

DOM ofrece a los programadores disponer de un control muy preciso sobre la estructura de documentos HTML o XML (añadir, modificar o eliminar).

Favorece el posicionamiento SEO

Conocer cómo influye la estructura DOM en el renderizado de un sitio web permite optimizarlo para reducir el tiempo necesario, lo cual favorecerá el posicionamiento web (obteniendo la página web mejores posiciones en los resultados de búsqueda de los principales buscadores).

Cómo funciona y cuál es su estructura

El modelo DOM identifica:

• Interfaces y objetos utilizados para representar y manipular un documento web.
• La semántica de estas interfaces y objetos, incluyendo sus atributos y su comportamiento.
• Las relaciones entre interfaces y objetos.

DOM es un modelo que estructura los distintos elementos de una página web en un diagrama de árbol. Cada nodo de esta estructura son elementos básicos y se relacionan entre ellos de forma jerárquica, de forma que cada nodo inferior depende directamente del nodo superior.

Una página web actual implica la construcción de una estructura de árbol que puede constar de miles de nodos y cambiar continuamente a medida que el usuario navega por las distintas páginas que componen un sitio web. Todo este proceso se realiza en el navegador (en segundo plano) de forma muy rápida (gracias a la capacidad de proceso de los ordenadores en la actualidad).

En la estructura DOM todo el árbol nace de un nodo principal desde el cual se generan el resto de nodos, a este nodo principal se le conoce como Document. Los nodos que se encuentran al mismo nivel se conocen como nodos hermanos, mientras que los nodos superiores que tienen uno o varios nodos dependientes se denominan nodo padre y nodos hijos.

Existen 12 tipos de nodos, aunque en la web HTML solo hay cinco, Estos tipos de nodos son:

• Document. El ya comentado nodo raíz de la estructura.
• Element. Son las distintas etiquetas y pueden tener una serie de atributos.
• Attr. Son los valores de los distintos atributos de los nodos Element.
• Text. Contienen el texto de una etiqueta HTML.
• Comment. Son los comentarios incluidos en HTML.

En el lenguaje XML se utilizan siete nodos más, como CDATASection, DocumentType, EntityReference, Entity, ProcessingInstruction, DocumentFragment, Notation.

Tanto HTML como XML no siguen de forma estricta el modelo DOM, sino que lo utilizan como referencia de organización de su sintaxis.

DOM está íntimamente ligado a JavaScript, ya que este lenguaje de programación lo utiliza para acceder y modificar las páginas web dinámicamente.

Hemos visto qué significa DOM y por qué es importante conocer como estructura esta API una página web en forma de árbol. Los programadores web encuentran en DOM un estándar sobre el cual trabajar en el desarrollo de sus sitios web, con la ventaja de no estar sujetos a un lenguaje de programación web determinado.