JavaScript DOM: Cómo cambiar el contenido de tu página web dinámicamente

¿Has visto páginas que cambian texto, muestran/ocultan contenido o reaccionan a tus clicks sin recargar? Eso es JavaScript DOM en acción. Y la buena noticia es que no es tan complicado como parece.

Si ya sabes HTML y CSS pero sientes que tus páginas son "estáticas y aburridas", este tutorial es perfecto para ti. En los próximos 20 minutos vas a crear tu primera página web interactiva.

🤔 ¿Qué es el DOM (sin tecnicismos)?

El DOM es como una versión "viva" de tu HTML que JavaScript puede tocar, cambiar y manipular. Imagínate que tu página HTML es un documento de papel, pero el DOM es la versión digital que puedes editar en tiempo real.

🎯 Los 3 poderes básicos del DOM

🚀 Proyecto práctico: De 0 a interactivo

Vamos a crear ejemplos progresivos. Cada uno será más interesante que el anterior, y todos funcionan de verdad.

📝 Nivel 1: Tu primer botón que hace algo

Empezamos con lo más básico: un botón que cambia su propio texto cuando le haces click.

HTML necesario:

<button id="mi-boton">Haz click aquí</button>

JavaScript mágico:

// 1. Encuentra el botón
const miBoton = document.querySelector('#mi-boton');

// 2. Escucha cuando le hagan click
miBoton.addEventListener('click', function() {
    // 3. Cambia el texto
    miBoton.textContent = '¡Funcionó!';
});

📝 Nivel 2: Mostrar y ocultar contenido

Ahora algo más útil: un botón que hace aparecer y desaparecer contenido. Esto es súper común en páginas reales.

HTML estructurado:

<button id="boton-secreto">Revelar secreto</button>
<div id="contenido-secreto" class="oculto">
    ¡Este contenido estaba oculto!
</div>

CSS para ocultar:

.oculto {
    display: none;
}

.visible {
    display: block;
}

JavaScript inteligente:

const boton = document.querySelector('#boton-secreto');
const contenido = document.querySelector('#contenido-secreto');

boton.addEventListener('click', function() {
    // Si está oculto, mostrarlo. Si está visible, ocultarlo
    if (contenido.classList.contains('oculto')) {
        contenido.classList.remove('oculto');
        contenido.classList.add('visible');
        boton.textContent = 'Ocultar secreto';
    } else {
        contenido.classList.add('oculto');
        contenido.classList.remove('visible');
        boton.textContent = 'Revelar secreto';
    }
});

📝 Nivel 3: Lista interactiva

Ahora vamos con algo más avanzado: agregar elementos a una lista dinámicamente. Esto es la base de muchas aplicaciones web.

HTML base:

<input type="text" id="mi-input" placeholder="Escribe algo...">
<button id="agregar-btn">Agregar</button>
<ul id="mi-lista"></ul>

JavaScript más potente:

const input = document.querySelector('#mi-input');
const boton = document.querySelector('#agregar-btn');
const lista = document.querySelector('#mi-lista');

boton.addEventListener('click', function() {
    // Obtener el texto del input
    const texto = input.value;
    
    // Solo agregar si hay algo escrito
    if (texto !== '') {
        // Crear un nuevo elemento li
        const nuevoItem = document.createElement('li');
        nuevoItem.textContent = texto;
        
        // Agregarlo a la lista
        lista.appendChild(nuevoItem);
        
        // Limpiar el input
        input.value = '';
    }
});

📝 Nivel 4: Contador interactivo

Para finalizar, algo que parece "de aplicación real": un contador que sube y baja.

HTML limpio:

<div class="contador">
    <button id="restar">-</button>
    <span id="numero">0</span>
    <button id="sumar">+</button>
</div>

JavaScript profesional:

// Variables para los elementos
const botonRestar = document.querySelector('#restar');
const botonSumar = document.querySelector('#sumar');
const numeroDisplay = document.querySelector('#numero');

// Variable para llevar la cuenta
let contador = 0;

// Función para sumar
botonSumar.addEventListener('click', function() {
    contador++;
    numeroDisplay.textContent = contador;
});

// Función para restar
botonRestar.addEventListener('click', function() {
    contador--;
    numeroDisplay.textContent = contador;
});

⚠️ Los 5 errores que cometen TODOS los principiantes

<head>
    <script src="script.js"></script>
</head>

<head>
    <script src="script.js" defer></script>
</head>

elemento.innerHTML = userInput;

elemento.textContent = userInput;

const boton = document.querySelector('#boton-que-no-existe');
boton.addEventListener('click', ...); // Error!

const boton = document.querySelector('#mi-boton');
if (boton) {
    boton.addEventListener('click', ...);
}

<button onclick="miFuncion()">Click</button>

// HTML
<button id="mi-boton">Click</button>

// JavaScript
document.querySelector('#mi-boton')
    .addEventListener('click', miFuncion);

const x = document.querySelector('#btn');
const y = 0;

const botonContador = document.querySelector('#contador-btn');
let numeroActual = 0;

🎯 Proyecto completo: Todo junto

Ahora que conoces los fundamentos, aquí tienes un proyecto que combina todo lo aprendido:

🚀 ¿Qué sigue después del DOM?

¡Felicidades! Ya sabes manipular el DOM y crear interactividad básica. Tus siguientes pasos son:

💡 Consejos finales