Manipulación del DOM con JavaScript

Creación y Eliminación de Elementos

En el vídeo se explica cómo generar HTML directamente con JavaScript usando el DOM. La idea es que primero creas un elemento con document.createElement(), después le añades contenido o atributos, y por último lo insertas en la página con appendChild()

Creación en Memoria: El método document.createElement("tag") genera un elemento (como un h1, div o p) en la memoria de JavaScript, pero no aparece automáticamente en el navegador. Para que sea visible, debe guardarse en una variable y luego "añadirse" a un elemento padre

1. Configuración del Elemento:

• document.createElement("h1") crea un nuevo elemento, pero todavía no aparece en la página
  
• Para guardarlo, se suele meter en una variable, por ejemplo var myH1 = document.createElement("h1")
  
• Luego puedes añadirle texto con textContent y atributos como id o class
• Finalmente, lo insertas dentro de otro elemento, normalmente el body o un div contenedor, usando appendChild()
  
  2. Quitar elementos del DOM
  El mismo vídeo también muestra cómo borrar elementos. Para eliminar un nodo, primero hay que localizarlo con getElementById() o getElementsByTagName(), y después usar remove().
  

3. Crear elementos anidados
También enseña cómo construir una estructura más compleja, por ejemplo un div con un h1 y un p dentro.
Se crea cada elemento por separado, configurarlo y luego meterlo dentro del padre correspondiente.

Estructura

1. Crear el div principal.
2. Crear el h1.
3. Añadir texto e id al h1.
4. Meter el h1 dentro del div.
5. Crear el p.
6. Añadir texto, id y class al p.
7. Meter el p dentro del div.
8. Meter el div en el body
   

4. Añadir clases y atributos
A cada elemento puedes darle atributos directamente desde JavaScript. Por ejemplo, al elemento h1 se le puede poner id, y a una etiqueta p se le puede añadir una clase con classList.add()

• element.id = "algo" asigna un identificador
• element.classList.add("clase") añade una clase CSS
• element.textContent = "texto" define el contenido visible
  

5.Inputs y elementos
El vídeo también muestra que no solo puedes crear títulos o párrafos: puedes crear inputs, enlaces y otros elementos HTML. En el ejemplo aparece un input tipo date, y también un enlace <a> con href, target y texto

2. Etiquetas <template>

En el vídeo se explica una forma más cómoda de trabajar cuando quieres generar bloques grandes de HTML. En lugar de crear cada etiqueta con JavaScript, puedes escribir la estructura en un <template> y luego reutilizarla

¿Qué es un template?
Un <template> es un bloque de HTML invisible que no se muestra directamente en la página. Sirve para copiar su contenido después con JavaScript

1. Crear el <template> en el HTML.
2. Guardar su contenido con document.getElementById("sample").content
3. Copiarlo con document.importNode(..., true)(Se accede al contenido mediante template.content`)
4. Modificar las partes que quieras dentro de esa copia
5. Insertarlo en el contenedor final con appendChild()

Modificar el contenido del template
Una vez copiado el template, puedes buscar elementos dentro de él con querySelector() y cambiar sus textos o atributos antes de insertarlo

3. Event Listeners y Ciclo de Vida del Script

Se trabajan los eventos de JavaScript, especialmente el evento click. La idea principal es que puedes “escuchar” acciones del usuario y ejecutar una función cuando ocurren.

Ubicación Crítica del Script: Los archivos HTML se cargan de arriba hacia abajo. Si el script intenta buscar un elemento (como un botón) antes de que el navegador lo haya dibujado, el resultado será null y el código fallará17. Por ello, se recomienda colocar el <script> justo antes del cierre de la etiqueta</body>

Conceptos básicos

• addEventListener() registra una función para un evento concreto
• El evento más usado en el ejemplo es click.
• Puedes usarlo en botones, títulos, enlaces y cualquier elemento interactivo.
  

4. Event Bubbling y Manipulación Dinámica

Se explica el event bubbling, que es el comportamiento por el cual un evento se propaga desde el elemento donde se produce hacia sus elementos padre. Esto permite hacer cosas como borrar un elemento haciendo clic en un botón interno.

Cómo funciona

• Haces clic en un elemento concreto, por ejemplo un botón
• El evento puede subir hacia el padre, luego hacia el abuelo, y así sucesivamente
• Esto permite detectar el elemento correcto usando

El Problema de los Elementos Nuevos: Si creas un botón de "Eliminar" dinámicamente, no puedes asignarle un listener al inicio porque el botón aún no existe en el DOM

Captura en el Padre: La solución es poner el listener en un padre permanente que sí exista desde el principio (ej. div id="app")

**El Objeto Evento (e):

• e.target: Es la propiedad que nos dice exactamente en qué elemento se hizo clic originalmente

• Filtrado: Podemos usar if (e.target.classList.contains("clase-boton")) para asegurarnos de que solo reaccionamos cuando el usuario pulsa el botón de eliminar y no cuando pulsa cualquier otra parte del contenedor

• parentElement: Si queremos borrar toda una fila o caja al pulsar un botón interno, usamos e.target.parentElement.remove(). Esto permite "subir" un nivel en la jerarquía del DOM para eliminar el contenedor completo del elemento que recibió el clic