Manipulación del DOM en JavaScript

El DOM (Document Object Model) es una interfaz de programación de aplicaciones (API) para documentos HTML y XML. En JavaScript, el DOM permite acceder, modificar y actualizar el contenido, la estructura y el estilo de un documento web. Con JavaScript, podemos manipular el DOM para cambiar la apariencia, agregar o eliminar elementos, o interactuar dinámicamente con los usuarios.

¿Qué es el DOM?

El DOM representa la estructura de un documento HTML como un árbol de nodos. Cada elemento, atributo y texto del documento se considera un nodo. A través de JavaScript, podemos acceder y modificar estos nodos, permitiendo crear aplicaciones web interactivas.

Acceso a Elementos del DOM

Para manipular el DOM, primero necesitamos acceder a los elementos del documento. Existen varias formas de hacerlo:

  • getElementById: Selecciona un elemento por su ID.
    • 
const element = document.getElementById("miElemento");
  • getElementsByClassName: Selecciona todos los elementos que tienen una clase específica.
    • 
const elementos = document.getElementsByClassName("miClase");
  • getElementsByTagName: Selecciona todos los elementos que tienen una etiqueta específica.
    • 
const parrafos = document.getElementsByTagName("p");
  • querySelector: Selecciona el primer elemento que coincide con un selector CSS.
    • 
const primerElemento = document.querySelector(".miClase");
  • querySelectorAll: Selecciona todos los elementos que coinciden con un selector CSS.
    • 
const todosElementos = document.querySelectorAll(".miClase");

Modificar el Contenido de los Elementos

Una vez que accedemos a un elemento, podemos modificar su contenido. Esto se puede hacer con las siguientes propiedades:

  • innerHTML: Permite obtener o establecer el contenido HTML de un elemento.
    • 
const elemento = document.getElementById("miElemento");
elemento.innerHTML = "Nuevo contenido HTML";
  • textContent: Permite obtener o establecer solo el contenido de texto de un elemento (sin etiquetas HTML).
    • 
const parrafo = document.querySelector("p");
parrafo.textContent = "Nuevo texto";

Modificar los Estilos de los Elementos

Podemos modificar los estilos de un elemento utilizando la propiedad style: 


const caja = document.getElementById("miCaja");
caja.style.backgroundColor = "yellow";  
caja.style.fontSize = "20px";           
caja.style.padding = "20px";

Con esta propiedad, podemos aplicar directamente estilos CSS en línea a los elementos seleccionados.

Crear y Eliminar Elementos

Con JavaScript, también podemos crear nuevos elementos y agregarlos al DOM, o eliminar elementos existentes:

  • createElement: Crea un nuevo elemento.
    • 
const nuevoElemento = document.createElement("div");
nuevoElemento.textContent = "Este es un nuevo div";
document.body.appendChild(nuevoElemento);
  • removeChild: Elimina un elemento del DOM.
    • 
const elementoAEliminar = document.getElementById("miElemento");
document.body.removeChild(elementoAEliminar);
  • appendChild: Añadir un nodo hijo a un elemento existente.
    • 
const contenedor = document.getElementById("contenedor");
contenedor.appendChild(nuevoElemento);

Modificar Atributos de los Elementos

También podemos modificar los atributos de los elementos HTML:

  • getAttribute: Obtiene el valor de un atributo.
    • 
const imagen = document.querySelector("img");
const src = imagen.getAttribute("src");
  • setAttribute: Establece el valor de un atributo.
    • 
imagen.setAttribute("src", "nuevo-imagen.jpg");
  • removeAttribute: Elimina un atributo de un elemento.
    • 
imagen.removeAttribute("src");

Agregar o Eliminar Clases

Es común agregar o quitar clases CSS a los elementos para cambiar su apariencia. Para esto, podemos usar la propiedad classList:

  • add: Añade una clase al elemento.
    • 
const elemento = document.querySelector("div");
elemento.classList.add("miClase");
  • remove: Elimina una clase del elemento.
    • 
elemento.classList.remove("miClase");
  • toggle: Alterna entre agregar y eliminar una clase.
    • 
elemento.classList.toggle("miClase");

Resumen

La manipulación del DOM es una de las funcionalidades más poderosas de JavaScript. Permite interactuar con los elementos HTML de la página, modificarlos, agregar nuevos elementos, eliminar los existentes y cambiar su estilo y atributos. A través del DOM, JavaScript proporciona un acceso completo a los documentos HTML, lo que permite crear aplicaciones web dinámicas y reactivas.

Anterior Siguiente