DOM - Qué es y cómo funciona

Para poder trabajar de forma global siguiendo una organización estandarizada y permitir que los sitios web sigan una serie de reglas comunes, la W3C (World Wide Web Consortium) desarrolla especificaciones, recomendaciones y herramientas en relación con el desarrollo en la red. Una de estas normas definidas es DOM, que define los elementos de una web, cómo acceder a ellos, etc.

A continuación veremos qué es DOM, cómo funciona y qué es lo que ofrece a los desarrolladores web.

Qué es DOM y para qué sirve

DOM (Document Object Model), cuyo significado es modelo de objeto de documento, es una estructura jerárquica de varios objetos que tienen una dependencia entre sí. Se trata de un estándar creado por la W3C donde se definen aquellos objetos que conforman un sitio web, cómo deben nombrarse y cuál es su relación.

DOM es independiente de cualquier lenguaje de programación, siendo una interfaz de programación (API) que sustenta la base para el desarrollo HTML y XML. Con DOM se crea la estructura lógica de estos documentos web y cómo se editan y acceden a los mismos.

A lo largo de la historia DOM ha ido evolucionando, encontrándose distintas versiones:

  • DOM nivel 1, en 1998.

  • DOM nivel 2, en 2000.

  • DOM nivel 3, en 2004.

  • DOM nivel 4, actualmente en desarrollo.

La estructura DOM está estrechamente relacionada con el lenguaje de programación JavaScript, que sigue su orden jerárquico para acceder y modificar páginas web, eCommerce o landing page o página de destino, de forma dinámica.

Funcionamiento y estructura de DOM

La estructura de los elementos que conforma una página web se estructuran utilizando un diagrama en forma de árbol en DOM. Esta relación jerárquica hace que cada nodo inferior dependa directamente de un nodo superior. Esta organización permite a los navegadores web ir cambiando entre nodos cuando un usuario navega por las distintas URL que forman un sitio web.

Del nodo principal, llamado Document, surgen el resto de nodos formando la estructura en forma de árbol de una web. Los nodos superiores e inferiores son conocidos como padre e hijo y los nodos del mismo nivel como hermanos. Existen 12 tipos de nodos distintos, cinco que se utilizan en HTML y siete más que los utiliza XML.

Qué ofrece DOM

DOM facilita la programación y desarrollo de páginas web, ofreciendo un estándar a seguir por los desarrolladores web. Las principales ventajas que ofrece son:

  • Poder controlar la estructura: Con DOM, los desarrolladores y programadores web pueden controlar de forma precisa la estructura de los documentos HTML o XML, realizando acciones como añadir, modificar o eliminar.

  • Favorece el posicionamiento web: Seguir el estándar DOM permite optimizar una página web para que sea más eficiente y su velocidad de carga sea mucho más rápida, es decir, que el navegador tardará menos tiempo en mostrar su contenido al usuario. Google premia con mejores posiciones en su ranking a las páginas que favorecen la experiencia del usuario y cargan de forma mucho más rápida, por lo que considerar DOM en el desarrollo web mejora el posicionamiento SEO.

  • Entorno independiente: DOM ofrece una interfaz estándar de programación web que puede utilizarse en diferentes aplicaciones y entornos sin la necesidad de una dependencia de otros archivos, como por ejemplo, librerías.

DOM es importante para que los desarrolladores web puedan trabajar bajo un sistema estándar que les permita crear y editar los distintos componentes que forman una página web. Con el uso de DOM una página web funcionará de forma más eficiente ayudando a su posicionamiento web y ofreciendo una mejor experiencia de navegación al usuario.

Palabras relacionadas:ASP (Active Server Pages)  ·  Usabilidad Web  ·  CSS (Cascading Style Sheets)  ·  API  ·  Framework