Método getElementsByClassName() del objeto HTML DOM Document

Definición y uso

getElementsByClassName() El método devuelve una colección de elementos con el nombre de clase especificado.

getElementsByClassName() El método devuelve HTMLCollection.

getElementsByClassName() Las propiedades son de solo lectura.

HTMLCollection

HTMLCollection Es una colección de elementos HTML similar a un array (lista).

Se puede acceder a los elementos de la colección mediante índice (comienza en 0).

length La propiedad devuelve el número de elementos en la colección.

Vea también:

Método getElementById()

Método getElementsByTagName()

Método querySelector()

Método querySelectorAll()

Objeto HTMLCollection

Ejemplo

Ejemplo 1

Obtener todos los elementos con la clase "example":

const collection = document.getElementsByClassName("example");

Prueba por tu cuenta

Ejemplo 2

Obtener todos los elementos que tienen las clases "example" y "color":

const collection = document.getElementsByClassName("example color");

Prueba por tu cuenta

Ejemplo 3

Número de elementos con class="example":

let numb = document.getElementsByClassName("example").length;

Prueba por tu cuenta

Ejemplo 4

Cambiar 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";
}

Prueba por tu cuenta

Sintaxis

document.getElementsByClassName("classname)

Parámetros

Parámetros Descripción
classname

Obligatorio. Nombre de clase del elemento.

Recupera múltiples nombres de clase separados por espacios, por ejemplo "test demo".

Valor de retorno

Tipo Descripción
Objeto

Objeto HTMLCollection.

Conjunto de elementos que tienen un nombre de clase específico.

Ordena los elementos según su aparición en el documento.

Compatibilidad del navegador

document.getElementsByClassName() Es una característica de DOM Level 1 (1998).

Todos los navegadores lo soportan:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte

Páginas relacionadas

Tutoriales de CSS:Sintaxis de CSS

Manual de referencia de CSS:Selector .class de CSS

Manual de referencia de HTML DOM:element.getElementsByClassName()

Manual de referencia de HTML DOM:Atributo className

Manual de referencia de HTML DOM:Atributo classList

Manual de referencia de HTML DOM:Objeto Style