Manipulación del DOM: Selecciona y Modifica Elementos con JavaScript | Introducción a JavaScript

¿Qué es el DOM? (10 minutos)

Explicación:

El DOM (Document Object Model) es una representación de la página web como un árbol de objetos que JavaScript puede manipular. Cada elemento HTML (como <p>, <div>) es un nodo en este árbol, y JavaScript puede seleccionarlos, modificarlos, o eliminarlos.

Por qué es importante:

Permite cambiar contenido, estilos, o atributos en tiempo real (por ejemplo, actualizar un texto o esconder un formulario).
En Laravel, usarás manipulación del DOM para mejorar vistas Blade, como mostrar mensajes dinámicos o validar formularios en el cliente.

Conceptos clave:

Seleccionar elementos: Encontrar nodos con métodos como getElementById o querySelector.
Modificar elementos: Cambiar texto (textContent), estilos (style), o atributos (className, hidden).
Ejemplo simple: Cambiar el texto de un párrafo (visto en Lección 1).

Cómo visualizar el DOM:

Usa las herramientas de desarrollo (F12 > Elements) para ver el árbol de elementos.

Prueba en consola:

console.log(document); // Muestra el objeto DOM

Analogía: El DOM es como un plano de una casa (la página web). JavaScript es el constructor que puede pintar paredes (estilos), mover muebles (contenido), o abrir/cerrar puertas (atributos).

Punto clave: Manipular el DOM es la base de la interactividad en JavaScript, esencial para aplicaciones dinámicas.

Actividad rápida (2 minutos):

Piensa en una página web interactiva (por ejemplo, una tienda online). Escribe en papel 1 cosa que podría cambiar usando el DOM. Ejemplo:

Cambiar el precio mostrado al seleccionar un producto.

Seleccionar elementos (15 minutos)

Explicación:

Para manipular el DOM, primero debemos seleccionar los elementos que queremos modificar.

Métodos principales:

getElementById: Selecciona un elemento por su id único.

let parrafo = document.getElementById("miParrafo");
console.log(parrafo); // Muestra el elemento <p id="miParrafo">

querySelector: Selecciona el primer elemento que coincida con un selector CSS (etiqueta, clase .clase, ID #id).

let boton = document.querySelector(".miBoton"); // Clase
let div = document.querySelector("div"); // Etiqueta
let id = document.querySelector("#intro"); // ID

Diferencia:
- getElementById es específico para IDs y más rápido.
- querySelector es más flexible, usando cualquier selector CSS.

Ejemplo:

<p id="miParrafo">Hola</p>
<button class="miBoton">Clic</button>
<script>
    let parrafo = document.getElementById("miParrafo");
    let boton = document.querySelector(".miBoton");
    console.log(parrafo.textContent); // Muestra: Hola
    console.log(boton); // Muestra: <button class="miBoton">
</script>

Punto clave: Seleccionar elementos correctamente es el primer paso para manipular vistas dinámicas en Laravel.

Actividad rápida (3 minutos):

Escribe en papel o consola cómo seleccionarías un <div> con id="contenedor". Solución sugerida:

let contenedor = document.getElementById("contenedor");
// O: let contenedor = document.querySelector("#contenedor");

Modificar contenido y estilos (15 minutos)

Explicación:
Una vez seleccionado un elemento, podemos modificar su contenido, estilos, o atributos.

Modificaciones comunes:

Texto:

textContent: Cambia el texto del elemento.

let parrafo = document.getElementById("miParrafo");
parrafo.textContent = "Nuevo texto";

Estilos:
- style.propiedad: Cambia estilos CSS (usa camelCase: backgroundColor en lugar de background-color).
```
parrafo.style.color = "blue";
parrafo.style.backgroundColor = "lightyellow";
```
Clases:
- className: Reemplaza todas las clases.
```
parrafo.className = "destacado";
```
Atributos:
- setAttribute("nombre", "valor"): Cambia atributos como hidden o disabled.
```
parrafo.setAttribute("hidden", "true"); // Oculta el elemento
```

Ejemplo práctico (como pide la lección):
Cambiar el color de fondo de una página dinámicamente:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Cambiar Fondo</title>
    <style>
        body {
            transition: background-color 0.3s; /* Suaviza el cambio */
        }
    </style>
</head>
<body>
    <h1>Cambia el fondo</h1>
    <button onclick="cambiarFondo()">Cambiar Color</button>
    <script>
        function cambiarFondo() {
            let colores = ["#ffcccc", "#ccffcc", "#ccccff"];
            let aleatorio = colores[Math.floor(Math.random() * colores.length)];
            document.body.style.backgroundColor = aleatorio;
        }
    </script>
</body>
</html>

Cómo funciona:

<button onclick="cambiarFondo()">: Llama a la función al hacer clic.
document.body: Selecciona el <body> (no necesita ID).
style.backgroundColor: Cambia el fondo.
colores y Math.random(): Selecciona un color aleatorio (rojo claro, verde claro, azul claro).
transition en CSS: Suaviza el cambio de color.

Cómo probarlo:

Crea un archivo fondo.html en VS Code.
Copia el código y guárdalo.
Ábrelo en un navegador.
Haz clic en el botón varias veces y verifica que el fondo cambia.
Abre la consola (F12 > Console) para depurar si hay errores.
Alternativa: Pega en CodePen (pestaña HTML/CSS/JS) y prueba.

Resultado esperado:

Un título y un botón.
Cada clic cambia el fondo a un color aleatorio (rojo, verde, o azul claro).

Punto clave: Modificar estilos dinámicamente es útil en Laravel para resaltar elementos o responder a acciones del usuario.

Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para incluir un cuarto color (#ffffcc, amarillo claro). Solución sugerida:

let colores = ["#ffcccc", "#ccffcc", "#ccccff", "#ffffcc"];

Resumen y preparación para la tarea (20 minutos)

Resumen:

DOM: Árbol de elementos que JavaScript puede manipular.
Seleccionar: getElementById para IDs, querySelector para cualquier selector CSS.
Modificar: Cambiar textContent, style, className, o atributos.
Ejemplo: Cambiamos el fondo de la página con un botón.
Estos conceptos permiten interfaces dinámicas, como en aplicaciones Laravel.

Preparación para la tarea:

La tarea pide crear un botón que oculte o muestre un formulario.

Usa style.display para controlar visibilidad:
- "none": Oculta el elemento.
- "block": Lo muestra.
Usa una variable o condición para alternar entre ocultar/mostrar.
Basado en el formulario de la Lección 2 (Módulo 2) o el de la Lección 1 (Módulo 3), puedes integrarlo o crear uno nuevo.

Estrategia sugerida:

Selecciona el formulario con getElementById o querySelector.
Crea una función que alterne style.display.
Conecta el botón con onclick.

Tarea práctica: Crea un botón que oculte/muestre un formulario

Instrucciones:

Crea un nuevo archivo HTML con un formulario simple (puedes usar el de la Lección 2 del Módulo 2 o uno nuevo con al menos 2 campos).
Añade un botón que, al hacer clic, oculte el formulario si está visible, o lo muestre si está oculto.
Asegúrate de:
- Usar <script> para el JavaScript.
- Seleccionar el formulario con getElementById o querySelector.
- Usar style.display para alternar visibilidad.
Usa el siguiente código como guía:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ocultar/Mostrar Formulario</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
        }
        .formulario {
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px;
            background-color: #4682b4;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Formulario Interactivo</h1>
    <button onclick="toggleFormulario()">Ocultar/Mostrar Formulario</button>
    <form id="miFormulario" class="formulario">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Tu correo">
        <button type="submit">Enviar</button>
    </form>
    <script>
        function toggleFormulario() {
            let formulario = document.getElementById("miFormulario");
            if (formulario.style.display === "none") {
                formulario.style.display = "block";
            } else {
                formulario.style.display = "none";
            }
        }
    </script>
</body>
</html>

Prueba el archivo:
- Guarda como toggle_formulario.html.
- Ábrelo en un navegador.
- Haz clic en el botón y verifica que el formulario aparece/desaparece.
- Usa la consola (F12 > Console) para depurar si no funciona.
- Alternativa: Pega en CodePen y prueba.

Ejemplo de solución esperada:

El código anterior es funcional. En el navegador:

Un formulario con 2 campos, estilizado con CSS básico.
Un botón que alterna la visibilidad del formulario (oculta si visible, muestra si oculto).

Tiempo estimado: 20-30 minutos (puedes hacerlo después de la lección).
Entregable: Archivo toggle_formulario.html con un botón que oculta/muestra un formulario. Puedes compartir el código o describirlo para que lo revise.

Consejo: Prueba añadir un mensaje en el botón que cambie (por ejemplo, "Ocultar" o "Mostrar") usando textContent para una mejora adicional.

Manipulación del DOM

¿Qué es el DOM? (10 minutos)

Explicación:

Cómo visualizar el DOM:

Actividad rápida (2 minutos):

Seleccionar elementos (15 minutos)

Explicación:

Actividad rápida (3 minutos):

Modificar contenido y estilos (15 minutos)

Resumen y preparación para la tarea (20 minutos)

Resumen:

Preparación para la tarea:

Tarea práctica: Crea un botón que oculte/muestre un formulario

Instrucciones:

Ejemplo de solución esperada:

Evaluación de Conocimientos: Manipulación del DOM con JavaScript

1. ¿Qué es el DOM en JavaScript?

2. ¿Qué método selecciona un elemento por su ID?

3. En el ejemplo de la lección, ¿qué propiedad se usó para cambiar el color de fondo?

4. ¿Qué método selecciona el primer elemento que coincide con un selector CSS?

5. En la tarea, ¿qué valor de style.display oculta un formulario?

6. ¿Qué propiedad cambia el texto de un elemento en el DOM?

7. En el ejemplo, ¿cómo se seleccionó el elemento <body> para cambiar su fondo?

8. En la tarea, ¿qué atributo conecta el botón a la función que oculta/muestra el formulario?

9. ¿Qué método permite cambiar un atributo como 'hidden' en un elemento?

10. En la tarea, ¿qué valor de style.display muestra el formulario?

Resultados: