Modelo de objetos de documento (DOM), que es básicamente la jerga de desarrollo web para “cómo funcionan las páginas web detrás de escena”, es algo que todo desarrollador web debería tener en su caja de herramientas. Es como la salsa secreta que impulsa el desarrollo web moderno.

Pero ¿por qué DOM? Recientemente me topé con un video sobre cómo funcionan los navegadores y luego me detuve en algunos artículos y esta es mi comprensión del “¿por qué?”

Todos los navegadores funcionan con un **motor de navegador**, que es un componente central de un navegador web responsable de representar el contenido web, incluidos HTML, CSS y JavaScript, en una representación visual con la que los usuarios pueden interactuar.

El “Documento”: Este término se refiere a una página web cargada en un navegador web. Representa la jerarquía estructurada del contenido de la página web, incluidos elementos como encabezados, párrafos, imágenes, enlaces, formularios y más. El documento DOM es esencialmente una representación en memoria de la estructura de la página web, creada por el motor de renderizado del navegador cuando se carga la página.

Ahora viene la parte interesante de cómo el motor del navegador transforma el documento en un árbol de nodos, que conocemos como el DOM para pintar.

Bueno, después de descargar el documento, se convierte a datos sin procesar, sí, 0 y 1. Y estos bytes de datos sin procesar se convierten en caracteres. Esta conversión se realiza en función de la codificación de caracteres del archivo HTML.

Estos caracteres se analizan en algo llamado tokens. Al igual que cualquier otro lenguaje de programación, el token se puede definir como el elemento individual más pequeño de ese lenguaje de programación que sea significativo. Aquí token se refiere a las etiquetas en HTML, a saber, body,h1,h2, p, intervalo, etc.

Una vez completada la tokenización, el siguiente paso es estructurar estos tokens. Aquí es donde los objetos entran en juego. Se crea un objeto a partir de estos tokens, estos objetos contienen mucha información sobre cada entidad, incluido el inicio de la etiqueta, el final de la etiqueta, los atributos, los datos/valor y más.

Ahora tenemos un “Documento” y “Objetos”, pero aún no está estructurado porque no hay relación entre estos objetos. Después de la tokenización, estos tokens se transforman en nodos. Cada nodo tendrá una relación con otro, con nodos padre, hijo y hermano. Estas relaciones de nodo a nodo forman una estructura familiar similar a un árbol. Este proceso se conoce como modelado del árbol de objetos. Ahora un modelo de árbol de nodos está listo desde el documento HTML y listo para ser pintado.

En resumen, el nombre “Modelo de objetos de documento” refleja su propósito y función. Sirve como modelo estructurado para el contenido de una página web, representado como una colección de objetos. El nombre “DOM” surgió de la fusión de “Documento” (la página web), “Objeto” (que representa elementos) y “Modelo” (la representación estructurada).

Espero que esto ayude y no dudes en enviarnos cualquier comentario o preguntar si tienes alguna pregunta o inquietud específica.