Como desarrollador web principiante, escucharás muchos términos y quizás no sepas cuáles son importantes para tu estudio. Uno de ellos es DOM, un concepto fundamental para los desarrolladores web. De hecho, puede que sea el más importante.
Pero ¿qué significa DOM?
DOM es el acrónimo de
Modelo de Objetos de Documento (Document Object Model). Es la forma en que un navegador web representa una página web internamente. El DOM determina el contenido de una página y cómo se relaciona cada elemento con los demás. En resumen, el DOM es un conjunto de instrucciones sobre cómo crear una página web específica. El DOM indica al navegador cómo renderizar el contenido de la página web y permite a los desarrolladores web editarlo mediante el código fuente.
¿Qué elementos componen el DOM?
Ahora que sabemos que DOM significa Modelo de Objeto de Documento, analicemos cada palabra del acrónimo para explicar mejor cómo estos elementos representan la estructura de una página web:
Documento
Podemos pensar en un documento como una forma de estructurar información, incluyendo artículos, libros y artículos científicos. Para los desarrolladores web, un documento es el nombre de una página web y consideran el DOM como modelo para todo el contenido de la página. El DOM denomina a este contenido objetos.
Objeto
El contenido de las páginas web son objetos, a veces llamados elementos o nodos. Estos son algunos objetos que puedes encontrar en una página web:
- Contenido. El contenido es el elemento más visible de una página web. Este puede incluir palabras, vídeos, imágenes y más.
- Elementos estructurales. Estos incluyen divs, contenedores y secciones. Puede que no los veas, pero sí ves cómo afectan a los elementos visibles, ya que los organizan en la página web.
- Atributos. Cada elemento de una página web tiene atributos. Estos incluyen, por ejemplo, clases, estilos y tamaños. Estos son objetos en el DOM, pero no son elementos como el contenido y los elementos estructurales.
Modelo
Un modelo es una representación de algo y nos ayuda a comprender cómo se construye algo. Existen modelos para muchas cosas que requieren comprensión, análisis y uso universal.
Un ejemplo de modelo utilizado es el de las instrucciones. Los planos, planos de planta e instrucciones de IKEA son ejemplos de este tipo de modelo. Muestran el objeto modelado con suficiente detalle como para que pueda recrearse.
Otro ejemplo de modelo es una descripción. Este tipo de modelo se utiliza para simplificar grandes ideas o sistemas complejos para que se comprendan con mayor facilidad. Este tipo de modelos nos ayuda a comprender cosas como nuestra galaxia.
En esencia, el DOM es un modelo para páginas web. Actúa como un conjunto de instrucciones para los navegadores web.
¿Cómo se ve el DOM?
El DOM se representa como un tipo de estructura de datos llamada árbol. Cada objeto del DOM se encuentra jerárquicamente bajo otro objeto, y cualquier objeto puede tener varios hijos, pero solo un padre.
Cada objeto DOM es propietario de sus hijos. Si elimina un objeto del DOM, todos sus hijos también se eliminarán.
El DOM en sí es digital, por lo que no se parece a nada, pero puede representarse de diferentes maneras. Estas representaciones nos ayudan a visualizar qué es el DOM.
Gráfico de árbol
Una forma de representar el DOM es con un gráfico de árbol. Un gráfico de árbol muestra la relación entre los objetos padre e hijo, con líneas entre ellos que representan su relación.
Tomemos como ejemplo un árbol genealógico. Arriba, estarían tus abuelos. Abajo, tus padres y sus hermanos, seguidos por ti, tus hermanos y tus primos.
De forma similar, el nodo raíz (el nodo en la parte superior del gráfico de árbol) de una página web sería el elemento HTML. Debajo, se encuentran los elementos head y body. Bajo el elemento body, posiblemente se encuentren los elementos header, main y footer. Debajo del elemento header, podrían encontrarse los elementos img, nav y h1.
HTML
La forma más común de representar el DOM es con HTML . Puedes ver el HTML de una página web abriendo las herramientas de desarrollo en tu navegador o haciendo clic derecho en un elemento y seleccionando "Inspeccionar elemento".
Puede que esta lista de elementos no parezca a primera vista una estructura de árbol, pero cada sangría en el inspector del navegador o en el ejemplo anterior es como un nivel vertical en un gráfico de árbol.
Los elementos HTML envuelven otros elementos que son sus hijos. El elemento img es hijo del elemento header, que a su vez es hijo del elemento body, que a su vez es hijo del elemento HTML.
Aunque esta es la forma más común de representar el DOM, HTML no es el DOM en sí, simplemente lo representa.
Código fuente
Hay más maneras de crear un documento que usar HTML. Puedes usar un lenguaje de programación backend como PHP para generar HTML al cargar una página web. Puedes usar JavaScript para modificar elementos de la página web dinámicamente. O bien, puedes usar un framework frontend como React para crear páginas web completas sin escribir HTML.
Página web renderizada
También podemos ver el DOM en la página web renderizada cuando el navegador lo convierte en algo que podemos ver en el navegador.
¿Qué es la manipulación DOM?
La manipulación del DOM es el proceso de usar JavaScript (u otro lenguaje de programación) para cambiar dinámicamente la estructura, el contenido o el estilo de una página web tras su carga. Esto es lo que hace que los sitios web modernos sean interactivos y responsivos. En lugar de recargar la página completa cada vez que un usuario hace clic en un botón o envía un formulario, los desarrolladores web pueden usar la manipulación del DOM para actualizar partes específicas de la página en tiempo real.
Por ejemplo, puedes usar JavaScript para cambiar el texto de un encabezado, añadir nuevos elementos a una lista, ocultar o mostrar secciones de la página o incluso aplicar nuevos estilos según las interacciones del usuario. La manipulación del DOM es potente porque permite que los sitios web se vean más rápidos y fluidos, creando una mejor experiencia para los usuarios.
Pon tu aprendizaje en acción
Como componente crítico del desarrollo web, necesitarás comprender el DOM si buscas convertirte en ingeniero front-end , ingeniero back-end o ingeniero full-stack.
Fuente: traducido al español y tomado de CodeCademy en inglés -
https://www.codecademy.com/resources/blog/what-is-dom/
Escrito por:
Stephan Miller