Seleccionar Elementos por su Clase en JavaScript

En JavaScript, es común que varios elementos compartan una misma clase (class). Para seleccionarlos y manipularlos de manera eficiente podemos utilizar el método getElementsByClassName(), el cual devuelve una colección de elementos del DOM que tienen la clase especificada.

Este método es especialmente útil cuando necesitas aplicar estilos dinámicos, modificar contenido o recorrer múltiples elementos a la vez sin depender de id. En este artículo exploraremos cómo funciona getElementsByClassName(), sus limitaciones y algunos ejemplos para aprovechar este método de selección.

¿Qué es y cómo funciona getElementsByClassName?

El método getElementsByClassName() selecciona todos los elementos que contienen una clase específica en su atributo class y devuelve una colección HTMLCollection con ellos. A diferencia de getElementById(), que devuelve solo un elemento, este método permite acceder a múltiples elementos a la vez.

document.getElementsByClassName("nombre_de_la_clase");

O si quieres seleccionar elementos dentro de un contenedor específico:

elementoPadre.getElementsByClassName("nombre_de_la_clase");

• nombre_de_la_clase: Es el nombre de la clase CSS de los elementos que queremos seleccionar.
• Retorna: Una HTMLCollection con todos los elementos que coinciden con la clase.

Ejemplo Básico: Seleccionar Todos los Elementos con una Clase

<p class="destacado">Texto importante 1</p>
<p class="destacado">Texto importante 2</p>
<p class="destacado">Texto importante 3</p>

<script>
  const elementos = document.getElementsByClassName("destacado");
  console.log(elementos); // HTMLCollection(3) [p.destacado, p.destacado, p.destacado]
</script>

El método devuelve una colección de todos los elementos <p> que tienen la clase "destacado".

¿Cuándo usar getElementsByClassName?

Este método es ideal en situaciones donde:

• Necesitas seleccionar múltiples elementos de la misma clase y modificarlos simultáneamente.
• Quieres recorrer una lista de elementos sin necesidad de asignar id a cada uno.
• Trabajas con estructuras repetitivas, como listas de productos, filas de tablas o elementos de navegación.

Ejemplo: Resaltar Todos los Elementos con una Clase

<p class="importante">Mensaje 1</p>
<p class="importante">Mensaje 2</p>
<p class="importante">Mensaje 3</p>
<button onclick="resaltar()">Resaltar</button>

<script>
  function resaltar() {
    const elementos = document.getElementsByClassName("importante");

    for (const elemento of elementos) {
      elemento.style.backgroundColor = "yellow";
    }
  }
</script>

En código anterior, cada elemento con la clase "importante" cambia su color de fondo a amarillo al hacer clic en el botón.

Limitaciones y Errores Comunes

Aunque getElementsByClassName() es una herramienta poderosa, tiene algunas limitaciones que debes conocer para evitar errores.

1. Devuelve una HTMLCollection, No un Array

Al igual que el selector que selecciona por el elemento por su tag getElementsByClassName() devuelve una HTMLCollection, que no es un array verdadero y no permite usar métodos como .map() o .forEach() directamente.

const elementos = document.getElementsByClassName("item");
elementos.forEach(e => e.textContent); // ❌ Error

Solución: Convierte la colección en un array antes de manipularla:

const elementosArray = Array.from(document.getElementsByClassName("item"));
elementosArray.forEach(e => e.textContent); // ✅ Funciona correctamente

2. Si No Hay Coincidencias, Devuelve una Lista Vacía

Si la clase especificada no existe en el documento, el método no lanza un error, sino que devuelve una colección vacía.

const elementos = document.getElementsByClassName("inexistente");
elementos.length; // 0

Solución: Siempre verifica si la colección tiene elementos antes de manipularlos:

if (elementos.length > 0) {
  console.log("Hay elementos en la colección.");
} else {
  console.log("No se encontraron elementos con esa clase.");
}

3. La Colección en Vivo se Actualiza Dinámicamente

Dado que getElementsByClassName() devuelve una colección en vivo, si agregas o eliminas elementos en el DOM, la colección se actualizará automáticamente.

const lista = document.getElementsByClassName("opcion");
lista.length; // 3

// Agregar un nuevo elemento dinámicamente
const nuevoItem = document.createElement("p");
nuevoItem.className = "opcion";
document.body.appendChild(nuevoItem);

lista.length; // Ahora la longitud será 4

Consideración: Si necesitas una colección estática que no cambie, usa querySelectorAll() en su lugar.

Métodos Alternativos a getElementsByClassName

Si bien getElementsByClassName() es eficiente, existen otras formas de seleccionar elementos.

• Si necesitas seleccionar elementos de una etiqueta, pero con más flexibilidad, querySelectorAll() es una mejor opción. A diferencia de getElementsByClassName(), este método devuelve una NodeList estática, lo que significa que no se actualiza dinámicamente.
• getElementsByTagName() Si los elementos comparten una etiqueta específica en lugar de una clase, puedes seleccionarlos con este selector.

Conclusión

El método getElementsByClassName() es una herramienta eficaz para seleccionar múltiples elementos del mismo tipo en el DOM basándose en su clase. Su uso es ideal cuando necesitas trabajar con listas de elementos, modificar estilos de manera masiva o acceder a grupos de elementos sin depender de id.

Aunque este método es rápido y eficiente, su naturaleza dinámica puede generar ciertos problemas si no se maneja correctamente.