Inicio Introducción al DOM en JavaScript

Introducción al DOM en JavaScript

Author: admin admin
enero 30, 2025

El DOM (Document Object Model) es una de las herramientas fundamentales en el desarrollo web con JavaScript. Es la estructura de la página web que el navegador genera a partir del código HTML y que permite a JavaScript acceder, modificar y manipular los elementos de la interfaz de manera dinámica. Comprender el DOM es esencial para cualquier desarrollador que desee crear aplicaciones interactivas sin necesidad de recargar la página.

A lo largo de este artículo exploraremos qué es el DOM, cómo funciona y en qué se diferencia del código HTML original.

¿Qué es el DOM y por qué es importante?

El DOM es una representación estructurada de un documento HTML en forma de árbol de nodos. Cuando un navegador carga una página web, no interpreta el HTML como un simple bloque de texto, sino que crea una versión estructurada de este código para facilitar su manipulación a través de lenguajes como JavaScript.

Cada elemento del HTML (etiquetas, atributos, textos, comentarios) se convierte en un nodo dentro de esta estructura jerárquica, donde los elementos pueden tener relaciones de padre, hijo y hermanos.

Ejemplo: HTML vs. Representación del DOM

Si tenemos el siguiente código HTML:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Mi Página</title>
  </head>
  <body>
    <h1>Hola, mundo</h1>
    <p>Bienvenidos a mi sitio web</p>
  </body>
</html>

El navegador lo interpreta en una estructura similar a la siguiente:

bash
DOCUMENT
 ├── <html>
 │    ├── <head>
 │    │    └── <title>Mi Página</title>
 │    ├── <body>
 │         ├── <h1>Hola, mundo</h1>
 │         ├── <p>Bienvenidos a mi sitio web</p>
HTML DOM representación

En este modelo, cada elemento HTML se convierte en un nodo, y estos nodos pueden ser manipulados a través de JavaScript para modificar la apariencia y el contenido de la página.

Diferencias entre el DOM y el código HTML original

Es común pensar que el HTML escrito en un archivo es lo mismo que el DOM, pero esto no es del todo cierto. Existen diferencias clave que debes comprender para evitar errores al manipular el DOM.

1. El DOM es dinámico, el HTML es estático

Cuando escribimos un archivo HTML ese código es fijo y no cambia por sí solo. Sin embargo, cuando se carga en el navegador, el DOM se puede modificar en tiempo real utilizando JavaScript. Esto significa que el HTML original nunca se altera pero el DOM sí puede cambiar dinámicamente.

Ejemplo: Modificar el contenido de una etiqueta con JavaScript

javascript
document.querySelector("h1").textContent = "Nuevo título dinámico";

Aunque el código HTML original tenía <h1>Hola, mundo</h1>, el DOM ahora muestra un nuevo contenido sin que el archivo HTML haya cambiado.

2. El DOM puede contener elementos que no estaban en el HTML original

El DOM no es una copia exacta del HTML escrito en el archivo. El navegador puede modificarlo automáticamente antes de mostrar la página al usuario. Además, los scripts de JavaScript pueden agregar nuevos elementos al DOM que no estaban en el código original.

javascript
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este párrafo fue agregado dinámicamente";
document.body.appendChild(nuevoParrafo);

Aquí, un nuevo <p> se añade al body sin estar definido en el archivo HTML.

3. El DOM puede diferir según el navegador

Dado que cada navegador interpreta el HTML y genera el DOM de manera ligeramente diferente, pueden existir pequeñas variaciones entre cómo un mismo código HTML se procesa en Chrome, Firefox o Safari. Aunque las diferencias suelen ser mínimas, es importante probar el comportamiento de una página en distintos navegadores.

El Proceso de Construcción del DOM

Cuando un navegador carga una página web, sigue varios pasos antes de que el contenido sea visible y manipulable. El DOM se construye en las siguientes etapas:

  1. Carga del Documento HTML:
    El navegador descarga el archivo HTML y comienza a procesarlo línea por línea.
  2. Tokenización y Creación de Nodos:
    El código HTML se divide en pequeños fragmentos llamados tokens (por ejemplo, etiquetas <html>, <body>, <p>). Luego, estos tokens se convierten en nodos que forman la estructura del DOM.
  3. Estructuración en Árbol:
    Los nodos creados en la etapa anterior se organizan en una jerarquía en forma de árbol, donde cada nodo puede tener nodos hijos y nodos hermanos.
  4. Interpretación y Corrección del Documento:
    A veces, el código HTML contiene errores, como etiquetas mal cerradas. El navegador intenta corregir automáticamente estos problemas y ajusta el DOM en consecuencia.
  5. Ejecución de Scripts:
    Si el documento incluye scripts de JavaScript (<script>), estos pueden modificar el DOM antes de que se termine de construir.
  6. Renderizado y Pintado:
    Una vez que el DOM está completamente construido, el navegador lo combina con los estilos CSS y muestra la página en la pantalla.

Conclusión

El DOM es la forma en que el navegador representa un documento HTML, permitiendo su manipulación mediante JavaScript. Sin embargo, lo que ves en el código fuente no siempre es igual a cómo el DOM es realmente interpretado por el navegador.

En este artículo hemos visto:

  • Cómo el navegador procesa y estructura el HTML para construir el DOM.
  • Cómo corrige automáticamente errores en el código HTML.
  • Buenas prácticas para optimizar la construcción y manipulación del DOM.

Comprender cómo el DOM se genera y optimizar su estructura no solo mejora el rendimiento de la página, sino que también facilita su manipulación en JavaScript.

+1
0
+1
0