Document.getElementsByClassName()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Retorna un objecto similar a un array de los elementos hijos que tengan todos los nombres de clase indicados. Cuando es llamado sobre el objeto document , la busqueda se realiza en todo el document, incluido el nodo raíz. También puedes llamar getElementsByClassName() sobre cualquier elemento; en ese caso retornara sólo los elementos hijos del elemento raíz indicado que contengan los nombres de clase indicados.

Sintaxis

js
var elementos = document.getElementsByClassName(nombres); // ó :
var elementos = elementoRaiz.getElementsByClassName(nombres);
  • elementos es una HTMLCollection de los elementos encontrados.
  • nombres es un string que representa la lista de nombres de clase a buscar; los nombres de clase se separan con un espacio.
  • getElementsByClassName se puede llamar sobre cualquier elemento, no solo sobre document. El elemento sobre el que se llama será usado como la raíz de la busqueda.

Ejemplos

Obtener todos los elementos de la clase 'prueba'

js
document.getElementsByClassName("prueba");

Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'

js
document.getElementsByClassName("rojo prueba");

Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'

js
document.getElementById("principal").getElementsByClassName("prueba");

También podemos usar los metodos de Array.prototype en cualquier HTMLCollection pasando el HTMLCollection como el valor this del método. Aquí buscaremos todos los elementos div de la clase 'test':

js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);

Especificaciones

Specification
DOM Standard
# ref-for-dom-document-getelementsbyclassname①

Compatibilidad del Navegador

BCD tables only load in the browser