Document.getElementsByClassName()

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

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 'test'

document.getElementsByClassName('test');

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

document.getElementsByClassName('rojo test');

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

document.getElementById('main').getElementsByClassName('test');

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':

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

Compatibilidad con navegadores

Especifiación

• W3C: getElementsByClassName