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 'prueba'
document.getElementsByClassName("prueba");
Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'
document.getElementsByClassName("rojo prueba");
Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'
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':
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