Método getElementsByClassName() del elemento HTML DOM

Definición y uso

getElementsByClassName() El método devuelve una colección de elementos que tienen el nombre de clase dado, como objeto NodeList.

Vea también:

Atributo classList

Atributo className

Método querySelector()

Método querySelectorAll()

Método getElementsByTagName()

Objeto Style de HTML DOM

Tutoriales:

Sintaxis de CSS

Selector de CSS

Manual de selector de CSS

NodeList

NodeList Es una colección de nodos similar a un array (lista).

Puede acceder a los nodos de la lista mediante índice (subíndice). El índice comienza en 0.

Atributo lengthDevuelve el número de nodos en la lista.

Ejemplo

Ejemplo 1

Modificar el texto del primer elemento de la lista usando class="child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Leche";

Intente hacerlo usted mismo

Ejemplo 2

Número de elementos class="child" en "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Intente hacerlo usted mismo

Ejemplo 3

Cambiar el tamaño del segundo elemento de class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Intente hacerlo usted mismo

Ejemplo 4

Utilice las clases "child" y "color" en el segundo elemento de class="example" para cambiar el tamaño del primer elemento:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Intente hacerlo usted mismo

Ejemplo 5

Cambiar el color de todos los elementos en "myDIV" con class="child":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Intente hacerlo usted mismo

Sintaxis

element.getElementsByClassName(classname)

Parámetros

Parámetros Descripción
classname

Obligatorio. Nombre de la clase del subelemento.

Separar varios nombres con espacios (por ejemplo, "child color").

Valor de retorno

Tipo Descripción
NodeList

Subelementos que contienen el nombre de clase dado.

Los elementos se ordenan según el orden en que aparecen en el código fuente.

Compatibilidad del navegador

element.getElementsByClassName() Es una característica del Nivel 1 del DOM (1998).

Todos los navegadores lo admiten completamente:

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