Interfaz DOM: qué es y cuáles son sus ventajas

Para entender qué es DOM, hay que empezar por decir que se trata de un acrónimo del inglés formado por las palabras document object model que podemos traducir como modelo de objetos del documento.

En otras palabras, para entender mejor qué significa DOM podemos decir que es una especie de mapa que se genera automáticamente cuando se carga una página web en el que aparecen todos los elementos que la forman y cómo están relacionados entre ellos.

Digamos que es una manera diferente de visualizar una página web de gran utilidad para desarrolladores web, pues permite crear páginas más dinámicas utilizando lenguajes como JavaScript o XML en cualquier navegador.

Qué es DOM y cuál es su origen

Antes de seguir profundizando sobre qué es el DOM, conviene analizar sus orígenes pues ayudará a entender cuál es su principal cometido. Para ello debemos remontarnos a los orígenes de Internet, la creación de la W3C y el desarrollo de los primeros navegadores.

La W3C —o consorcio de las tres W— es un organismo internacional dirigido por el creador del protocolo HTTP, así como del lenguaje HTML Tim Berners-Lee. El principal objetivo de esta organización es velar por mantener unos estándares para que las tecnologías de Internet puedan seguir desarrollándose y sean de acceso universal.

Si bien las compañías que desarrollaron los primeros navegadores como el Explorer o el desaparecido Netscape seguían los estándares de HTML, cuando entraban en acción los lenguajes tipo scripts cada cual usaba sus propios protocolos, de tal forma que la visualización de una página web variaba en función del navegador.

Así pues, la W3C decidió tomar cartas en el asunto para crear un lenguaje estándar que pudiera usarse en todo tipo de plataformas, en este caso el JavaScript. Esto a su vez permitió que se creara el estándar DOM para facilitar el acceso a los distintos objetos de una página web.

Desde entonces se han ido creando distintos niveles de DOM pues las primeras versiones eran bastante inestables y tenían fallos de seguridad que poco a poco se han ido corrigiendo.

Con todo esto, podemos definir el DOM como una API o interfaz de programación de aplicaciones que nos brinda una serie de comandos y funciones estándar que permiten a los lenguajes como JavaScript interactuar con los elementos de una página web basada en HTML, así como con elementos de CSS o de XML

Cómo funciona y cuál es su estructura

Por tanto, mediante el document object model tendremos acceso a la estructura jerarquizada de los elementos de una página web determinada. Para ser más exactos se trata de un esquema en forma de árbol de nodos, en el que cada elemento es un nodo que a su vez puede anidar otros nodos.

Por poner un ejemplo sencillo: si tuviéramos una página web con una tabla en la que hubiera textos o imágenes, si la visualizamos como DOM encontraríamos un nodo principal llamado y si lo desplegamos encontraríamos en su interior el nodo, y así sucesivamente con todas las secciones.

Cómo usar el DOM

A estas alturas ya sabemos qué es DOM, pero aún nos falta saber cómo se puede utilizar. Lo cierto es que es tan sencillo como llamar a las funciones de esta API dentro de un script desde la página HTML. Es por esto que conviene poner etiquetas a cada uno de los elementos HTML con los que queremos trabajar en nuestro script para que sea más sencillo localizarlos.

Por ejemplo, mediante el comando document.getelementbyid es posible acceder a un elemento concreto según la identificación que le hayamos puesto y generar un evento o una acción como cambiar un texto de forma dinámica.

El DOM en los navegadores

Otro aspecto a tener en cuenta es que desde cualquier navegador podemos acceder a la estructura DOM de una página web, por lo general basta con abrir las herramientas para desarrolladores.

Esto puede ser de gran ayuda si estamos desarrollando un eCommerce utilizando algún tipo de plataforma CMS como por ejemplo Magento, PrestaShop, Shopify o WooCommerce.

Entre otras cosas porque cuando intentamos personalizar las plantillas de estas plataformas conviene conocer la identificación de los distintos elementos para poder trabajar con ellos con mayor precisión.

Ventajas de DOM

Una de las mayores ventajas que ofrece el DOM es que otorga una gran flexibilidad a los desarrolladores. Esto se traduce en que permite explorar los márgenes de creatividad de los diseñadores web aplicando todo tipo de estilos muy personalizables.

Por otro lado, permite generar páginas web con gran dinamismo que dan la oportunidad a los usuarios de interactuar sin necesidad de recargar la página manualmente.

En resumidas cuentas, para que Internet siga teniendo sentido es necesario mantener una serie de protocolos y de lenguajes comunes para que cualquier página web pueda ser explorada desde cualquier navegador. En este sentido el estándar DOM ha permitido seguir evolucionando en el diseño de páginas web, cada vez más dinámicas y con mayor funcionalidad.