Manipulación del DOM y Eventos

4. Manipulación del DOM y Eventos

4.1 Estructura del DOM

El Document Object Model (DOM) es una representación en forma de árbol de un documento HTML o XML. Cada elemento del documento, como etiquetas, atributos y texto, se representa como un nodo en el árbol.

Los nodos del DOM se pueden manipular mediante JavaScript para crear, modificar y eliminar elementos del documento.

4.2 Selección de elementos

Para manipular un elemento del DOM, primero se debe seleccionar mediante uno de los siguientes métodos:

• getElementById(): selecciona un elemento mediante su atributo ID.
• getElementsByClassName(): selecciona todos los elementos con una clase específica.
• getElementsByTagName(): selecciona todos los elementos con una etiqueta específica.
• querySelector(): selecciona el primer elemento que coincida con un selector CSS.
• querySelectorAll(): selecciona todos los elementos que coincidan con un selector CSS.

Ejemplo:

let elemento = document.getElementById("mi-elemento");
let elementos = document.getElementsByClassName("mi-clase");
let elementos2 = document.getElementsByTagName("p");
let elemento3 = document.querySelector("#mi-elemento");
let elementos4 = document.querySelectorAll(".mi-clase");

4.3 Manipulación de elementos

Una vez seleccionado un elemento del DOM, se puede manipular mediante las siguientes propiedades y métodos:

• innerHTML: obtiene o establece el contenido HTML del elemento.
• textContent: obtiene o establece el texto del elemento.
• style: obtiene o establece el estilo CSS del elemento.
• className: obtiene o establece la clase CSS del elemento.
• appendChild(): agrega un elemento como hijo del elemento actual.
• removeChild(): elimina un elemento hijo del elemento actual.
• createElement(): crea un nuevo elemento HTML.
• createTextNode(): crea un nuevo nodo de texto.

Ejemplo:

let elemento = document.getElementById("mi-elemento");
elemento.innerHTML = "<strong>Nuevo contenido</strong>";
elemento.textContent = "Nuevo texto";
elemento.style.color = "red";
elemento.className = "nueva-clase";

let nuevoElemento = document.createElement("p");
nuevoElemento.textContent = "Nuevo párrafo";
elemento.appendChild(nuevoElemento);

let elementoHijo = document.getElementById("mi-elemento-hijo");
elemento.removeChild(elementoHijo);

4.4 Eventos y controladores de eventos

Los eventos en JavaScript son acciones que ocurren en el documento, como hacer clic en un botón o presionar una tecla. Los controladores de eventos son funciones que se ejecutan cuando ocurre un evento.

Para asignar un controlador de eventos a un elemento del DOM, se utiliza el método addEventListener().

Ejemplo:

let boton = document.getElementById("mi-boton");
boton.addEventListener("click", function() {
  console.log("Se hizo clic en el botón");
});

4.5 Propagación y delegación de eventos

La propagación de eventos en JavaScript se refiere a la forma en que los eventos se propagan a través del árbol del DOM. Los eventos se propagan desde el elemento objetivo hasta el elemento raíz del documento.

La delegación de eventos en JavaScript se refiere a la práctica de asignar un controlador de eventos a un elemento padre en lugar de asignarlo a cada elemento hijo. Esto es útil cuando se tienen muchos elementos hijos y se quiere evitar asignar un controlador de eventos a cada uno de ellos.

Ejemplo:

let lista = document.getElementById("mi-lista");
lista.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("Se hizo clic en un elemento de la lista");
  }
});

4.6 Ejemplos y casos de uso

Algunos ejemplos y casos de uso de la manipulación del DOM y eventos en JavaScript incluyen:

• Crear una galería de imágenes que muestre una imagen grande al hacer clic en una miniatura.
• Crear un formulario de contacto que valide los campos antes de enviarlo.
• Crear un menú desplegable que muestre submenús al pasar el cursor por encima.
• Crear un reproductor de música que permita reproducir, pausar y cambiar de canción.
• Crear un juego interactivo que responda a los eventos del teclado o el ratón.