¿Cómo cambiar la clase de un elemento con JavaScript?

Usando la Propiedad className

La propiedad className cambia la clase de un elemento. Para reemplazar todas las clases, usa:

element.className = "newClass";

Para añadir una nueva clase sin eliminar las existentes:

element.className += " newClass";

Para eliminar una clase:

element.className = element.className.replace("classToRemove", "");

element.className = element.className.replace("classToRemove", "").trim();

Usando la API classList

La API classList ofrece métodos para manipular clases:

// Añadir una clase
element.classList.add("newClass");

// Eliminar una clase
element.classList.remove("oldClass");

// Alternar una clase (añadir si no está presente, eliminar si está presente)
element.classList.toggle("toggleClass");

Estos métodos funcionan en navegadores modernos, pero pueden no funcionar en versiones antiguas de Internet Explorer. Para una mejor compatibilidad, usa un polyfill o usa la propiedad className.

Uso de getElementById()

El método getElementById() selecciona un solo elemento basado en su atributo ID. Este método es rápido:

const element = document.getElementById('myElementId');

Este método funciona bien cuando necesitas manipular un elemento específico en tu página. Es útil para elementos que no cambian o se mueven en tu estructura HTML.

Uso de querySelector() y querySelectorAll()

Estos métodos te dan más opciones para seleccionar elementos:

querySelector() selecciona el primer elemento que coincide con el selector CSS:

const element = document.querySelector('.myClass');

querySelectorAll() selecciona todos los elementos que coinciden con el selector, devolviendo una NodeList:

const elements = document.querySelectorAll('.myClass');

Estos métodos te permiten seleccionar elementos usando diferentes criterios:

• Por clase: querySelector('.className')
• Por ID: querySelector('#idName')
• Por nombre de etiqueta: querySelector('div')
• Por atributo: querySelector('[data-attribute]')
• Por relación: querySelector('ul > li')

Puedes combinar selectores para un enfoque más específico:

const element = document.querySelector('div.myClass[data-attribute="value"]');

Estos métodos son útiles cuando necesitas seleccionar elementos basados en criterios complejos o cuando quieres manipular múltiples elementos a la vez.

// Selecciona todos los párrafos dentro de un div con clase 'content'
const paragraphs = document.querySelectorAll('div.content p');

// Recorre los párrafos seleccionados y añade una clase
paragraphs.forEach(paragraph => {
  paragraph.classList.add('highlighted');
});

Manejo de Eventos de Clic

Para cambiar clases cuando un usuario hace clic en un elemento, puedes usar el método addEventListener(). Este método agrega un escuchador de eventos al elemento, que ejecuta una función cuando ocurre el evento.

Así es cómo cambiar una clase al hacer clic:

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  this.classList.toggle('active');
});

En este ejemplo, hacer clic en el botón alterna la clase 'active'.

También puedes usar funciones flecha para los escuchadores de eventos:

button.addEventListener('click', () => {
  button.classList.add('clicked');
});

Respuesta a Otros Eventos

Además de los clics, puedes responder a otros eventos para cambiar clases:

1. Mouseover y mouseout:

const element = document.querySelector('#myElement');

element.addEventListener('mouseover', () => {
  element.classList.add('hovered');
});

element.addEventListener('mouseout', () => {
  element.classList.remove('hovered');
});

2. Pulsación de tecla:

document.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    document.body.classList.toggle('dark-mode');
  }
});

3. Envío de formulario:

const form = document.querySelector('#myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.classList.add('submitted');
});

4. Desplazamiento:

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

Estos ejemplos muestran cómo usar eventos para activar cambios de clase. Combinando estos métodos, puedes crear páginas web dinámicas que respondan a las acciones del usuario.

document.querySelector('#parentElement').addEventListener('click', (event) => {
  if (event.target.matches('.childClass')) {
    event.target.classList.toggle('active');
  }
});

const element = document.querySelector('#myElement');

element.addEventListener('dblclick', () => {
  element.classList.toggle('enlarged');
});