Guía Para Transformar Elementos en JavaScript
Modificar individualmente los componentes de una página es uno de los pilares de la interactividad en la programación web. En esta guía, exploraremos procesos de manipulación de elementos mediante JavaScript, mejor conocido como JS, profundizando en sus métodos y propiedades.
Seleccionar Elementos con JavaScript
Para manipular un elemento, primero debemos seleccionarlo. JS nos proporciona diferentes funciones para acceder a los elementos, tales como getElementById, getElementsByClassName, getElementsByTagName y las más recientes querySelector y querySelectorAll. Veamos como utilizarlas:
document.getElementById('miElemento');
document.getElementsByClassName('miClase');
document.getElementsByTagName('p');
document.querySelector('.miClase');
document.querySelectorAll('div.miClase');
Una vez hemos obtenido la referencia del elemento o elementos deseados, podemos cambiar su contenido o estilo.
Modificar Contenido de Texto
Para cambiar el contenido de texto de un elemento, JS dispone de innerText y textContent. Ambas propiedades se pueden utilizar para obtener o asignar texto a un elemento:
var elemento = document.getElementById('miElemento');
elemento.textContent = 'Nuevo contenido de texto';
La propiedad innerText considera la estilización al obtener el texto, mientras que textContent no lo hace.
Modificar HTML Interno
Cuando es necesario cambiar no solo el texto, sino también el contenido HTML de un elemento, se utiliza la propiedad innerHTML. Esto permite incluso agregar nuevos elementos HTML dentro del elemento seleccionado:
var contenedor = document.getElementById('miContenedor');
contenedor.innerHTML = '<p>Este es un párrafo inyectado.</p>';
Cambiar Atributos y Clases
Los atributos de los elementos, como href, src o id, pueden ser modificados mediante el método setAttribute. Por otro lado, la propiedad classList provee la posibilidad de añadir, eliminar, o comprobar la existencia de clases CSS de un elemento.
var enlace = document.getElementById('miEnlace');
enlace.setAttribute('href', 'http://nuevoenlace.com');
var boton = document.getElementById('miBoton');
boton.classList.add('nuevaClase');
boton.classList.remove('claseAntigua');
boton.classList.toggle('claseAlternativa');
Estilizar Elementos
La propiedad style de un objeto del DOM permite modificar el estilo CSS de un elemento. Es posible cambiar propiedades individuales o asignar múltiples estilos simultáneamente:
var miElemento = document.getElementById('elementoParaEstilizar');
miElemento.style.color = 'blue';
miElemento.style.backgroundColor = 'lightgrey';
miElemento.style.cssText = 'color: blue; background-color: lightgrey; padding: 20px;';
Recuerda que las propiedades CSS en camelCase deben utilizarse cuando asignamos estilos directamente en JavaScript.
Eventos para Interactividad
Los eventos son fundamentales para añadir interactividad. JavaScript nos permite escuchar eventos, como clicks, y ejecutar funciones que alteren los elementos de alguna manera:
var miBoton = document.getElementById('btnClick');
miBoton.addEventListener('click', function() {
miBoton.style.backgroundColor = 'green';
});
Trabajar con el DOM en JavaScript
El Modelo de Objetos del Documento, o DOM, es toda la estructura de objetos de una página web que permite a JavaScript interactuar con sus elementos. Poder modificarlo implica que podemos añadir, eliminar o cambiar los nodos del árbol del DOM:
var nuevoElemento = document.createElement('div');
nuevoElemento.innerText = 'Soy un nuevo div';
document.body.appendChild(nuevoElemento);
A continuación, cómo remover un elemento del DOM:
var elementoARemover = document.getElementById('divARemover');
elementoARemover.parentNode.removeChild(elementoARemover);