El modelo de objeto del documento (DOM) en JavaScript.

El DOM (Document Object Model) es la estructura que el navegador genera a partir del HTML. Permite que JavaScript interactúe con la página, modificando elementos, estilos o contenido en tiempo real. Entender qué es, cómo funciona y para qué sirve el DOM es esencial para crear sitios web dinámicos. A continuación, veremos sus características principales y algunos ejemplos prácticos.

que es el dom y para que sirve en javascript

Índice

1. ¿Qué es el DOM?

El DOM (Modelo de Objetos del Documento) es una representación estructurada del documento HTML (o XML) cargado en el navegador.

Imagina que el navegador convierte tu HTML en una estructura de objetos en forma de árbol, donde cada parte del HTML (etiquetas, atributos, texto, comentarios) se convierte en un nodo que puede ser accedido y manipulado con JavaScript.

📌 El DOM no es el HTML en sí, sino una versión viva y dinámica del HTML que se puede leer, modificar o eliminar mediante JavaScript.

1.1. ¿Cómo funciona el DOM?

Cuando el navegador carga una página web:

Lee el archivo HTML desde el servidor o almacenamiento local.
Interpreta ese HTML y construye un árbol DOM, donde cada etiqueta se convierte en un nodo.
Una vez creado el DOM, el navegador lo usa para renderizar (mostrar visualmente) la página.
JavaScript puede acceder a ese DOM para interactuar dinámicamente con los contenidos de la página.

1.2. Representación del DOM en Árbol

Imaginemos que tenemos esta estructura HTML básica:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hola Mundo</h1>
    <p>Bienvenido al DOM</p>
  </body>
</html>Lenguaje del código: HTML, XML (xml)

El navegador crea esta estructura DOM:

document
└── html
    └── body
        ├── h1
        │   └── "Hola Mundo"
        └── p
            └── "Bienvenido al DOM"Lenguaje del código: JavaScript (javascript)

📌Cada parte del documento es un nodo del árbol, y todos juntos forman una jerarquía.

📌 Veamos esta jerarquía simplificada:

document → raíz
- html → hijo de document
  - head → hijo de html
  - body → hijo de html
    - h1 (elemento)
      - Texto: «Hola» (nodo de texto)
    - p (elemento)
      - Texto: «Texto aquí» (nodo de texto)

📌Cada uno de estos nodos puede tener padres, hijos y hermanos.

📌Esto es clave porque nos permite acceder fácilmente a cualquier parte de la página desde JavaScript.

1.3. ¿Para qué sirve El DOM?

Gracias al DOM, podemos:

Cambiar el contenido de un texto sin recargar la página.
Agregar o eliminar elementos HTML dinámicamente.
Modificar estilos CSS desde JavaScript.
Responder a eventos del usuario, como clics, teclas presionadas o movimientos del mouse.

Por ejemplo, con JavaScript podrías hacer que un botón oculte un párrafo, cambie una imagen, agregue un nuevo bloque de contenido o modifique el título de la página… todo sin tener que recargarla.

2. Principales características Del DOM.

2.1. Representación en forma de árbol

El DOM organiza todo el contenido HTML como un árbol jerárquico de nodos.
Cada etiqueta HTML es un nodo tipo elemento.
El texto dentro de una etiqueta es un nodo de texto.
Todo parte de un nodo raíz llamado document.

2.2. Cada parte del documento es un objeto

Cada nodo del DOM se representa como un objeto JavaScript.
Esto permite acceder, modificar, eliminar o crear elementos desde JS usando métodos y propiedades.
Ejemplo: document.body, element.innerHTML, node.parentNode, etc.

2.3. Interactividad dinámica

JavaScript puede leer y modificar el DOM en tiempo real sin recargar la página.

Esto hace posible crear páginas web dinámicas, como:

Cambiar textos.
Mostrar u ocultar elementos.
Agregar contenido desde un formulario o botón.

2.4. Control total del documento.

JavaScript puede:

Crear elementos (document.createElement)
Agregar elementos (appendChild)
Eliminar elementos (removeChild o remove)
Modificar atributos (setAttribute)
Cambiar clases y estilos (classList, style)

2.5. Soporte de eventos

El DOM permite escuchar y reaccionar a eventos del usuario (click, teclado, scroll, etc.).
Esto es posible gracias a los manejadores de eventos, como:

button.addEventListener("click", () => {
  alert("¡Hiciste clic!");
});Lenguaje del código: PHP (php)

2.6. Se carga en tiempo real

El DOM se construye mientras el navegador interpreta el HTML.
Por eso, si intentas manipular el DOM antes de que esté completamente cargado, puede fallar.
Para evitar eso, se usa:

window.addEventListener("DOMContentLoaded", () => {
  // Código seguro aquí
});Lenguaje del código: JavaScript (javascript)

2.7. Accesible con diferentes selectores

Podes acceder a nodos mediante:

getElementById
getElementsByClassName
getElementsByTagName
querySelector
querySelectorAll

Esto da flexibilidad para trabajar con cualquier parte del documento.

2.8. Estandarizado por el W3C

El DOM está definido por la W3C y sigue una especificación oficial.
Esto garantiza que funcione de manera coherente entre distintos navegadores modernos.

3. Relación entre HTML, DOM y JavaScript

La relación entre HTML, DOM y JavaScript es fundamental para entender cómo funcionan las páginas web modernas. Cada uno cumple un rol específico pero trabajan en conjunto para construir experiencias dinámicas e interactivas.

3.1. HTML define la estructura:

El HTML (HyperText Markup Language) es el lenguaje que usamos para definir la estructura y el contenido de una página web. Es el código que escribimos en nuestros archivos .html, donde indicamos qué elementos habrá: encabezados, párrafos, imágenes, enlaces, listas, formularios, etc.

Por ejemplo:

<h1>Bienvenidos</h1>
<p>Esta es una página de ejemplo.</p>Lenguaje del código: HTML, XML (xml)

Este código le dice al navegador: «mostrá un título y un párrafo».

NOTA!!!! Si te animas y deseas ver el resultado de este ejemplo y de todos los que iremos proporcionando directamente desde tu PC, te invito a seguir estos pasos.

Primero, revisa el punto 5 del siguiente artículo sobre como usar e instalar VSCode (este es el editor de código mas usado), donde encontrarás los pasos para crear la estructura necesaria para visualizar una página desde tu navegador predeterminado.
Si entendiste correctamente este paso anterior, sabrás donde colocar el código script que te acabamos de proporcionar (arriba). Ahora, puedes visualizar el resultado, para ello puedes hacer lo siguiente:
- Una vez abierta y visualizada la página, abre la consola del navegador presionando la tecla F12.
- Ahora, dirígete a la pestaña que dice Console, y desde aquí podrás ver el resultado del script que hayamos introducido anteriormente.
No te preocupes, estos pasos son más simples de lo que parecen!!!! Entonces… cada vez que dejemos un código de ejemplo como éste, puedes seguir estos pasos y ver los resultados por ti mismo. ¡Ojalá te animes!!!!

Link para descargar el editor de código Visual Studi Code!!

3.2. El navegador genera el DOM a partir del HTML

Cuando abrís una página web, el navegador lee el HTML y crea internamente una representación en forma de árbol: el DOM (Document Object Model).

Este árbol organiza cada elemento HTML como un objeto o nodo, lo que permite a otros lenguajes como JavaScript acceder a cada parte de la página mediante código.

Por ejemplo:

La etiqueta <h1> se convierte en un nodo tipo elemento.
El texto dentro del <h1> se convierte en un nodo de texto.

Este DOM vive en memoria (no es visible directamente en la pantalla) y representa la versión manipulable del HTML.

3.3. JavaScript interactúa con el DOM en tiempo real

Una vez que el DOM está construido, JavaScript puede interactuar con él para modificar la estructura, el contenido o el estilo de la página, mientras el usuario la está viendo, sin necesidad de recargarla.

🚀Con JavaScript podés:

3.3.1. Leer contenido del DOM

Una de las primeras cosas que querrás hacer es acceder a la información que ya existe en tu página web. Con JavaScript, puedes leer el contenido de cualquier elemento HTML presente en el DOM. Esto es útil para obtener valores, verificar estados o simplemente mostrar información al usuario.

const titulo = document.querySelector("h1").textContent;Lenguaje del código: JavaScript (javascript)

3.3.2. Cambiar contenido

No solo puedes leer el contenido, sino que también puedes modificarlo dinámicamente. Si necesitas actualizar texto, imágenes o cualquier otro tipo de información en tu página sin recargarla, esta es la forma de hacerlo. Esto es ideal para mostrar mensajes personalizados, resultados de cálculos o datos cargados de forma asíncrona.

document.querySelector("h1").textContent = "Nuevo título dinámico";Lenguaje del código: JavaScript (javascript)

3.3.3. Agregar elementos

Tu página no tiene por qué ser estática. Con JavaScript, puedes crear nuevos elementos HTML desde cero e insertarlos en cualquier parte del DOM. Esto es invaluable para añadir elementos de forma condicional, crear listas dinámicas, o construir interfaces complejas sobre la marcha.

const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este párrafo fue agregado con JavaScript";
document.body.appendChild(nuevoParrafo);Lenguaje del código: JavaScript (javascript)

3.3.4. Eliminar elementos

Así como puedes añadir elementos, también puedes quitar elementos existentes del DOM. Esto es útil para limpiar la página, eliminar contenido obsoleto o manejar la visibilidad de ciertos componentes.

document.querySelector("p").remove();Lenguaje del código: JavaScript (javascript)

3.3.5. Modificar estilos

El DOM no solo se trata de estructura y contenido; también puedes controlar la apariencia de tus elementos. Con JavaScript, puedes cambiar propiedades CSS directamente, lo que te permite aplicar temas, resaltar elementos o crear animaciones y transiciones complejas.

document.querySelector("h1").style.color = "red";Lenguaje del código: JavaScript (javascript)

3.3.6. Responder a eventos del usuario

La interactividad es el corazón de la web moderna. JavaScript te permite escuchar y responder a las acciones de los usuarios, como clics, movimientos del ratón, entradas de teclado, y muchos otros eventos. Esto es fundamental para crear formularios interactivos, botones que realizan acciones y cualquier tipo de funcionalidad que dependa de la interacción del usuario.

3.4. Conclusión: HTML + DOM + JavaScript

HTML → Le da forma y estructura al contenido.
DOM → Es la traducción viva y manipulable del HTML dentro del navegador.
JavaScript → Es el lenguaje que lee y manipula esa estructura, creando una experiencia dinámica para el usuario.