CodeAventura
JavaScript en el DOM
▸Fundamentos del DOM▸Introducción al DOM

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM en acción</title>
  </head>
  <body>
    <h1>Panel de bienvenida</h1>
    <p class="estado">Sin conectar</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
01 / 16Introducción al DOM

Introducción al DOM

Qué es el DOM en palabras simples

Cuando el navegador lee tu HTML, no lo deja como “texto plano”. Lo transforma en una estructura en memoria llamada DOM (Document Object Model).

Piensa en el DOM como un árbol:

  • cada etiqueta es un nodo
  • cada nodo puede tener hijos
  • JavaScript puede leer ese árbol y modificarlo

Gracias al DOM, tu página puede pasar de estática a interactiva.

El puente entre HTML y JavaScript

Sin DOM, JavaScript no podría:

  • cambiar textos en pantalla
  • mostrar mensajes al usuario
  • reaccionar a clics o formularios

Con DOM sí puede. Por eso, cuando escribes algo como:

estás diciéndole al navegador: “tráeme ese nodo del árbol para trabajar con él”.

Cómo cambiar texto desde JavaScript

Una vez que seleccionas un elemento, puedes cambiar su texto visible con textContent:

textContent reemplaza todo el texto del elemento por el que tú le asignes. Lo vas a usar muchísimo a lo largo de este curso.

Idea clave de esta clase

No vas a memorizar métodos todavía. Primero vamos a fijar esta base:

  1. El HTML se convierte en DOM
  2. JavaScript accede al DOM
  3. JavaScript modifica el DOM

Si entiendes eso, todo lo demás se vuelve mucho más natural.

Flujo mental recomendado

Antes de escribir código DOM, hazte esta secuencia:

  1. ¿Qué elemento quiero tocar?
  2. ¿Cómo lo selecciono?
  3. ¿Qué propiedad o atributo quiero cambiar?

Este orden te evita escribir código improvisado.

Tu primer mini objetivo

En esta lección trabajas con dos archivos: index.html y script.js. El objetivo es preparar el HTML para que JavaScript lo pueda encontrar, y luego dejar una señal visible en la interfaz.

Tu desafío 🚀

Primero en /index.html:

  1. Añade el atributo id=”titulo-principal” al <h1>

Luego en /script.js: 2. Selecciona #titulo-principal con document.querySelector o document.getElementById 3. Selecciona el párrafo .estado con document.querySelector 4. Cambia su textContent a Conectado al DOM

El DOM no se aprende leyendo: se aprende tocándolo.