Tutorial JavaScript: Modificación de elementos DOM

La Modificación de Elementos del DOM en JavaScript es un proceso esencial en el desarrollo web. El Document Object Model (DOM) es una representación del contenido de una página web, proporcionada por el navegador, que permite a JavaScript manipular la estructura, el contenido y el estilo de la página. Modificar el DOM implica cambiar algo acerca de esa representación, ya sea agregando, eliminando o cambiando elementos, o alterando sus atributos o contenido de texto.

Obtener elementos del DOM

Antes de poder modificar elementos del DOM, primero será necesario seleccionar o acceder a ellos. JavaScript ofrece varias formas de hacer esto:

// Por ID
var elementoPorId = document.getElementById('miId');

// Por clase
var elementosPorClase = document.getElementsByClassName('miClase');

// Por etiqueta
var elementosPorEtiqueta = document.getElementsByTagName('miEtiqueta');

// Por selector CSS (devuelve el primer elemento que coincide)
var elementoPorSelector = document.querySelector('.miClase');

// Por selector CSS (devuelve todos los elementos que coinciden)
var elementosPorSelector = document.querySelectorAll('.miClase');

Modificar atributos de elementos

Los elementos del DOM a menudo tienen atributos que pueden ser modificados (por ejemplo: class, id, href, src).

// Modificar un atributo
elementoPorId.setAttribute('class', 'nuevaClase');

// Obtener un atributo
var clase = elementoPorId.getAttribute('class');

// Eliminar un atributo
elementoPorId.removeAttribute('class');

Muchos de los atributos comunes de los elementos del DOM pueden modificarse directamente utilizando la notación de punto.

// Modificar el atributo 'id'
elementoPorId.id = 'nuevoId';

// Modificar el atributo 'class'
elementoPorId.className = 'nuevaClase';

// Modificar el atributo 'src' de una imagen
var imagen = document.querySelector('img');
imagen.src = 'nuevaImagen.jpg';

// Modificar el atributo 'href' de un enlace
var enlace = document.querySelector('a');
enlace.href = 'https://www.nuevaurl.com';

La propiedad classList

La propiedad classList es muy útil para trabajar con las clases de un elemento. classList es una lista de las clases de un elemento, y tiene métodos para agregar, eliminar y alternar clases.

// Agregar una clase
elementoPorId.classList.add('nuevaClase');

// Eliminar una clase
elementoPorId.classList.remove('nuevaClase');

// Alternar una clase (la agrega si no está presente, la elimina si está presente)
elementoPorId.classList.toggle('nuevaClase');

// Verificar si una clase está presente
if (elementoPorId.classList.contains('nuevaClase')) {
  console.log('El elemento tiene la clase "nuevaClase".');
}

Atributos de datos personalizados (data-*)

Los atributos de datos personalizados son una forma de almacenar información adicional en el DOM. Estos atributos tienen el prefijo data-, seguido por el nombre que se quiera dar al atributo. Puede accederse a estos atributos de datos a través del objeto dataset en el elemento del DOM.

// Establecer un atributo de datos personalizados
elementoPorId.dataset.miTributoDeDatos = 'miValor';

// Obtener un atributo de datos personalizados
console.log(elementoPorId.dataset.miTributoDeDatos); // imprime: 'miValor'

Estas son solo algunas de las formas en que pueden modificarse los atributos de los elementos del DOM en JavaScript. Hay otros atributos y métodos disponibles, y algunas peculiaridades a tener en cuenta (como el hecho de que los atributos booleanos como disabled y checked deben ser establecidos como propiedades para funcionar correctamente en algunos casos), pero estas son algunas de las técnicas más comúnmente utilizadas.

Modificar el contenido de los elementos

El contenido de los elementos del DOM también puede ser modificado. Esto se puede hacer cambiando el contenido de texto de un elemento, o cambiando el HTML dentro de un elemento:

// Modificar el contenido de texto
elementoPorId.textContent = 'Nuevo contenido de texto';

// Modificar el contenido HTML
elementoPorId.innerHTML = '<p>Nuevo contenido HTML</p>';

Agregar y eliminar elementos

Además de modificar los elementos existentes, también se pueden agregar y eliminar elementos del DOM:

// Crear un nuevo elemento
var nuevoElemento = document.createElement('p');

// Añadir contenido al nuevo elemento
nuevoElemento.textContent = 'Soy un nuevo elemento';

// Añadir el nuevo elemento al DOM
elementoPorId.appendChild(nuevoElemento);

// Eliminar un elemento del DOM
elementoPorId.removeChild(nuevoElemento);

Estos son solo algunos de los métodos disponibles para trabajar con el DOM en JavaScript. La manipulación del DOM es un aspecto central de la programación en JavaScript para la web, y hay muchas más técnicas y métodos disponibles que van más allá del alcance de esta introducción. A medida que se profundiza en JavaScript, se encontrará con conceptos más avanzados como eventos, propagación de eventos, y más, todos los cuales implican trabajar con el DOM de alguna manera.