🌐 Nivel 12 - DOM: Manipulando la Página

📖 El DOM (Document Object Model)

🌐 ¿Qué es el DOM?

El DOM es como un mapa de todos los elementos de tu página web. JavaScript usa este mapa para encontrar y modificar cualquier parte de la página: textos, colores, estilos, ¡todo!

💡 Piensa en el DOM como...

Un árbol familiar donde document es el abuelo, y todos los elementos HTML son sus hijos y nietos. ¡Puedes visitar y cambiar a cualquier familiar!

🛠️ Métodos principales:

document.getElementById("id")

Busca UN elemento por su ID único

document.querySelector(".clase")

Busca el PRIMER elemento que coincida

document.querySelectorAll("p")

Busca TODOS los elementos que coincidan

elemento.textContent

Lee o cambia el texto de un elemento

elemento.style.propiedad

Cambia estilos CSS desde JavaScript

elemento.classList.add/remove

Agrega o quita clases CSS

📝 Ejemplo completo:

// 1. Obtener elemento
let titulo = document.getElementById("miTitulo");

// 2. Cambiar texto
titulo.textContent = "¡Nuevo título!";

// 3. Cambiar estilos
titulo.style.color = "blue";
titulo.style.fontSize = "2rem";

// 4. Agregar clase CSS
titulo.classList.add("destacado");

// 5. Agregar evento
titulo.addEventListener("click", function() {
    alert("¡Hiciste clic!");
});

💻 Editor DOM Interactivo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Manipulando el DOM</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #cffafe, #a5f3fc);
            min-height: 100vh;
            padding: 30px;
        }
        
        .contenedor {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        
        h1 {
            color: #0891b2;
            transition: all 0.3s;
        }
        
        .tarjeta {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin: 20px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        
        .destacada {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            transform: scale(1.05);
            border: 3px solid #f59e0b;
        }
        
        .lista {
            list-style: none;
            padding: 0;
        }
        
        .lista li {
            background: #f1f5f9;
            padding: 12px;
            margin: 8px 0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .lista li:hover {
            background: #e2e8f0;
            transform: translateX(10px);
        }
        
        .lista li.completado {
            background: #d1fae5;
            text-decoration: line-through;
        }
        
        button {
            padding: 12px 25px;
            margin: 5px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;
        }
        
        button:hover { transform: scale(1.1); }
        
        .btn-agregar { background: #22c55e; color: white; }
        .btn-color { background: #8b5cf6; color: white; }
        .btn-toggle { background: #f59e0b; color: white; }
        
        input {
            padding: 12px;
            font-size: 1rem;
            border: 2px solid #0891b2;
            border-radius: 8px;
            width: 250px;
        }
        
        #contador {
            font-size: 2rem;
            color: #0891b2;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="contenedor">
        <h1 id="titulo">🌐 Manipulando el DOM</h1>
        
        <div class="tarjeta" id="tarjeta1">
            <h3>Contador de clics</h3>
            <p id="contador">0</p>
            <button onclick="sumarClic()">👆 ¡Haz clic!</button>
            <button onclick="resetearContador()">🔄 Resetear</button>
        </div>
        
        <div class="tarjeta" id="tarjeta2">
            <h3>Cambiar estilos</h3>
            <button class="btn-color" onclick="cambiarColorTitulo()">
                🎨 Cambiar color título
            </button>
            <button class="btn-toggle" onclick="toggleDestacada()">
                ⭐ Toggle destacada
            </button>
        </div>
        
        <div class="tarjeta" id="tarjeta3">
            <h3>Lista de tareas</h3>
            <input type="text" id="nuevaTarea" placeholder="Nueva tarea...">
            <button class="btn-agregar" onclick="agregarTarea()">
                ➕ Agregar
            </button>
            <ul class="lista" id="listaTareas">
                <li onclick="toggleCompletado(this)">Aprender HTML</li>
                <li onclick="toggleCompletado(this)">Aprender CSS</li>
                <li onclick="toggleCompletado(this)">Aprender JavaScript</li>
            </ul>
        </div>
    </div>

👁️ Vista Previa Interactiva

DOM - ¡Controla toda la página!

🌐 ¿Qué es el DOM?

💡 Piensa en el DOM como...

🛠️ Métodos principales:

📝 Ejemplo completo:

🛠️ Controles del DOM

🎯 Reto 1

🎨 Reto 2

📝 Reto 3

➕ Reto 4

1. ¿Qué significa DOM?

2. ¿Cuál método busca un elemento por su ID?

3. ¿Cómo cambias el color de un elemento?