Ejemplo
Obtener todos los elementos con el nombre de la clase especificada:
var x =
document.getElementsByClassName("example");
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El getElementsByClassName() método devuelve una colección de todos los elementos en el documento con el nombre de la clase especificada, como un objeto NodeList.
El objeto NodeList representa una colección de nodos. Los nodos pueden ser accedidos por números de índice. El índice comienza en 0.
Consejo: Puede utilizar la longitud de la propiedad del objeto NodeList para determinar el número de elementos con un nombre de clase especificado, entonces se puede recorrer todos los elementos y extraer la información que desee.
Soporte del navegador
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sintaxis
document.getElementsByClassName( classname )Los valores de los parámetros
| Parámetro | Tipo | Descripción |
|---|---|---|
| classname | String | Necesario. El nombre de la clase de los elementos que desea conseguir. Para buscar varios nombres de clase, separarlos con espacios, como "test demo" . |
Detalles técnicos
| DOM Versión: | Nivel básico Objeto Documento 1 |
|---|---|
| Valor de retorno: | Un objeto NodeList, que representa una colección de elementos con el nombre de la clase especificada. Los elementos de la colección devuelta se clasifican como aparecen en el código fuente. |
Más ejemplos
Ejemplo
Obtener todos los elementos, tanto con el "example" y "color" clases:
var x =
document.getElementsByClassName("example color"); Inténtalo tú mismo " Ejemplo
Averiguar cuántos elementos con class = "ejemplo" que hay en el documento (con la propiedad length del objeto NodeList):
var x =
document.getElementsByClassName("example").length; Inténtalo tú mismo " Ejemplo
Cambiar el color de fondo de todos los elementos con class = "ejemplo":
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Inténtalo tú mismo " Páginas relacionadas
Tutorial CSS: CSS Selectores
CSS Referencia: CSS Selector .class
HTML DOM Referencia: elemento. getElementsByClassName()
HTML DOM Referencia: className Property
HTML DOM Referencia: classList Property
HTML DOM Referencia: Estilo de objeto