Ejemplo de Dom Element.getElementsByClassName

los Element método getElementsByClassName() devuelve una vida HTMLCollection que contiene todos los elementos descendientes que tienen el nombre o nombres de clase especificados.

El método getElementsByClassName() sobre el Document La interfaz funciona esencialmente de la misma manera, excepto que actúa en todo el documento, comenzando en la raíz del documento.

Sintaxis

var elements = element.getElementsByClassName(names);

Parámetros

names

A DOMString que contiene uno o más nombres de clase para hacer coincidir, separados por espacios en blanco.

Valor devuelto

Un HTMLCollection proporcionando una lista actualizada en vivo de cada elemento que es miembro de cada clase en names.

Notas de uso

Como siempre, la colección devuelta es En Vivo, lo que significa que siempre refleja el estado actual del árbol DOM enraizado en el elemento en el que se llamó a la función. Como nuevos elementos que combinan names se agregan al subárbol, aparecen inmediatamente en la colección. Del mismo modo, si un elemento existente que no coincide names tiene su conjunto de clases ajustado para que coincida, aparece inmediatamente en la colección.

Lo contrario también es true; como los elementos ya no coinciden con el conjunto de nombres, se eliminan inmediatamente de la colección.

En en modo capricho, los nombres de las clases se comparan sin distinción entre mayúsculas y minúsculas. De lo contrario, distinguen entre mayúsculas y minúsculas.

Ejemplos de

Coincidir con una sola clase

Para buscar elementos que incluyan entre sus clases una sola clase especificada, solo proporcionamos ese nombre de clase al llamar getElementsByClassName():

element.getElementsByClassName('test');

Este ejemplo busca todos los elementos que tienen una clase de test, que también son descendientes del elemento que tiene la id de main:

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

Coincidencia de varias clases

Para encontrar elementos cuyas listas de clases incluyan tanto red y test clases:

element.getElementsByClassName('red test');

Examinando los resultados

Puede utilizar el item() método en el devuelto HTMLCollection o estándar array sintaxis para examinar elementos individuales de la colección. Sin embargo el siguiente código no funcionará como era de esperar porque "matches" cambiará tan pronto como "colorbox" se elimina la clase.

var matches = element.getElementsByClassName('colorbox');for(var i=0; i<matches.length; i++)
  matches[i].classList.remove('colorbox');
  matches.item(i).classList.add('hueframe');

En su lugar, use otro método, como:

var matches = element.getElementsByClassName('colorbox');while(matches.length >0)
  matches.item(0).classList.add('hueframe');
  matches[0].classList.remove('colorbox');

Este código encuentra elementos descendientes con el "colorbox" clase, agrega la clase "hueframe", llamando item(0), luego quita "colorbox" (utilizando array notación). Otro elemento (si queda alguno) se convertirá en item(0).

Filtrar los resultados usando array métodos

También podemos utilizar métodos de Array.prototype en cualquier HTMLCollection pasando el HTMLCollection como el método this valor. Aquí encontraremos todo

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