Tutorial JavaScript: Manipulación DOM

El Modelo de Objetos del Documento (DOM, por sus siglas en inglés) es una representación en forma de árbol de todos los elementos de una página web. JavaScript puede interactuar con esta representación para realizar cambios en la página web. Esta interacción es lo que se conoce como manipulación del DOM.

La manipulación del DOM en JavaScript implica cambiar, agregar o eliminar elementos HTML y atributos en una página web. Para manipular el DOM, JavaScript ofrece una serie de métodos y propiedades que permiten seleccionar nodos (objetos del DOM) y modificarlos.

Creación de elementos

Un aspecto importante de la manipulación del DOM es la capacidad de crear nuevos nodos. Los nuevos elementos se crean usando el método document.createElement(), al que se le pasa el tipo de elemento a crear. Una vez creado, el nuevo elemento puede ser agregado al DOM.

let parrafo = document.createElement('p'); // Crea un nuevo elemento párrafo

Aún así, este nuevo elemento no aparecerá en la página hasta que se añada a un elemento existente del DOM. Para añadir un nuevo nodo al DOM se utilizan los métodos appendChild() o insertBefore().

let contenedor = document.getElementById('contenedor'); // Obtiene el elemento contenedor
contenedor.appendChild(parrafo); // Añade el párrafo al contenedor

Modificación de atributos y contenido

Después de crear un nuevo nodo, a menudo se querrá cambiar su contenido o modificar sus atributos. JavaScript ofrece varias formas de hacerlo.

Para cambiar el contenido de un nodo, se puede utilizar la propiedad textContent o innerHTML. textContent cambia el contenido de texto de un nodo, mientras que innerHTML puede cambiar el contenido HTML.

parrafo.textContent = 'Este es un nuevo párrafo'; // Cambia el contenido de texto
parrafo.innerHTML = '<strong>Este es un nuevo párrafo</strong>'; // Cambia el contenido HTML

Para cambiar los atributos de un nodo, se pueden utilizar los métodos setAttribute() y getAttribute(). setAttribute() cambia el valor de un atributo, mientras que getAttribute() obtiene el valor de un atributo.

parrafo.setAttribute('class', 'claseParrafo'); // Cambia el atributo 'class' a 'claseParrafo'
let clase = parrafo.getAttribute('class'); // Obtiene el valor del atributo 'class'

Eliminación de elementos

Para eliminar un elemento del DOM, se puede utilizar el método removeChild(), que elimina un nodo hijo de un nodo padre. El nodo eliminado se puede guardar en una variable, lo que permite volver a añadirlo más tarde si se desea.

let nodoEliminado = contenedor.removeChild(parrafo); // Elimina el párrafo del contenedor

La manipulación del DOM es una parte integral de JavaScript y es esencial para la creación de sitios web dinámicos e interactivos. Al entender cómo funciona el DOM y cómo manipularlo, se pueden crear experiencias de usuario más ricas y personalizadas.