- Manipulación del DOM y Eventos
Ver índice del contenido
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.