Cómo seleccionar elementos por nombre de clase usando JavaScript

El getElementsByClassName() proporciona una forma rápida de seleccionar todos los elementos DOM que contienen una clase CSS específica en JavaScript. Devuelve un objeto HTMLCollection que es un objeto similar a una matriz que contiene una colección de elementos HTML.

El siguiente ejemplo demuestra cómo puede usar el getElementsByClassName() método para seleccionar e iterar sobre todos Elementos HTML que tienen el active nombre de la clase:

const elems = document.getElementsByClassName('active');

// iterate over all HTML elements
for (const el of elems) {
    console.log(el.innerText);
}

Desde HTMLCollection no es una lista de nodos ni una matriz, no puede usar el bucle forEach() sobre sus elementos. Por lo tanto, he usado la instrucción for...of en el ejemplo anterior.

El getElementsByClassName() El método funciona en todos los navegadores modernos y antiguos, incluido Internet Explorer 9 y superior. Dado que solo se puede usar para seleccionar elementos por nombre de clase, su uso es limitado.

Si desea más flexibilidad para seleccionar elementos DOM mediante selectores CSS arbitrarios, utilice el método querySelectorAll() en su lugar:

const elems = document.querySelectorAll('active');

Eche un vistazo a la guía sobre cómo seleccionar elementos DOM para obtener más información sobre las diferentes formas de obtener elementos DOM en JavaScript.