Documento HTML DOM getElementsByClassName()
Ejemplo
Obtenga todos los elementos con class="example":
const collection = document.getElementsByClassName("example");
Obtenga todos los elementos con las clases "ejemplo" y "color":
const collection = document.getElementsByClassName("example color");
Más ejemplos a continuación.
Definición y uso
El getElementsByClassName()método devuelve una colección de elementos con un nombre de clase específico.
El getElementsByClassName()método devuelve una HTMLCollection .
La getElementsByClassName()propiedad es de solo lectura.
Colección HTML
Una HTMLCollection es una colección de nodos HTML.
Se puede acceder a los nodos de una colección mediante números de índice. El índice comienza en 0.
La propiedad length devuelve el número de elementos de la colección.
Ver también:
El método getElementById() del documento
El método getElementsByTagName() del documento
El método QuerySelector() del documento
Sintaxis
document.getElementsByClassName(classname)
Parámetros
| Parameter | Description |
| classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Valor devuelto
| Escribe | Descripción |
| Objeto. | Un objeto HTMLCollection . Una colección de elementos con el nombre de clase especificado. Los elementos se ordenan tal como aparecen en el documento. |
Más ejemplos
Número de elementos con class="example":
let numb = document.getElementsByClassName("example").length;
Cambia el color de fondo de todos los elementos con class="example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
páginas relacionadas
Tutorial CSS: Sintaxis CSS
Referencia CSS: CSS .class Selector
Referencia HTML DOM: elemento .getElementsByClassName()
Referencia HTML DOM: propiedad className
Referencia HTML DOM: propiedad classList
Referencia HTML DOM: objeto de estilo
Compatibilidad con navegador
document.getElementsByClassName()es una característica DOM Nivel 1 (1998).
Es totalmente compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |