HTML DOM getElementsByClassName() Method

<Elemento de objeto

Ejemplo

Cambiar el texto del primer elemento de la lista con class = "niño" (index 0) en una lista con class = "ejemplo":

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Antes de cambiar el texto:

Coffee
Tea

Después de cambiar el texto:

Milk
Tea

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 elementos secundarios de un elemento 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 nodos secundarios con el nombre de la clase especificada, entonces se puede recorrer todos los nodos 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

element .getElementsByClassName( classname )

Los valores de los parámetros

Parámetro	Tipo	Descripción
classname	String	Necesario. El nombre de la clase de los elementos secundarios que desea conseguir. Para buscar varios nombres de clase, separarlos con espacios, como "child color" .

Detalles técnicos

DOM Versión:	Nivel básico 1 Elemento de objetos
Valor de retorno:	Un objeto NodeList, que representa una colección de elementos secundarios los 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

Cambiar el color de fondo del segundo elemento con class = "niño" dentro de un <div> elemento:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Inténtalo tú mismo "

Ejemplo

Averiguar cuántos elementos con class = "niño" que hay en el interior de un <div> elemento (usando la propiedad length del objeto NodeList):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

El resultado de x será:

Inténtalo tú mismo "

Ejemplo

Cambiar el color de fondo del primer elemento tanto con el "child" y "color" de clase en el interior de un elemento con class = "ejemplo":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Inténtalo tú mismo "

Ejemplo

Cambiar el color de fondo de todos los elementos con class = "niño" dentro de un <div> elemento:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

Inténtalo tú mismo "