Latest web development tutorials

HTML DOM getElementsByClassName método ()

Elementos objeto de referencia objeto Element

Ejemplos

Modificar la clase list = "ejemplo" en la clase = "niño" del primer elemento (valor de índice 0) del texto:

Lista var = document.getElementsByClassName ( "ejemplo" ) [0];
list.getElementsByClassName ( "hijo") [0 ] = .innerHTML "leche";

Modificar el texto antes:

  • café

Después de modificar el texto:

  • leche

Trate »

Definiciones y uso

getElementsByClassName método () devuelve todos los elementos del documento se especifica el nombre de clase de la colección, como objeto NodeList.

objeto NodeList que representa una orden de la lista de nodos. Lista_nodos objeto que podemos acceder a la lista de nodos (número de índice a partir de 0) a través de la lista de nodos del número de índice de nodo.

Consejo: Puede utilizar el objeto NodeList de longitud propiedad para determinar el número de elementos por nombre de la clase, y los diversos elementos del ciclo para obtener los elementos que necesita.


Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión del método.

camino
getElementsByClassName () 4.0 9.0 3.0 3.1 9.5

gramática

.getElementsByClassName elemento (nombre de clase)

parámetro Valor

parámetros tipo descripción
nombre_clase cadena Must. clases de elementos que necesita para obtener el nombre.

nombres de las clases separadas por espacios múltiples, tales como "demostración de prueba".

Descripción técnica

DOM Version: Nivel básico 1 Elemento de objetos
Valor de retorno: NodeList objeto que representa el elemento especifica el nombre de clase de la colección. El orden de los elementos de la colección de su tipo en orden de aparición en el código.

Ejemplos

más ejemplos

Ejemplos

Modificar elemento <div> En la segunda clase = elementos "hijo" del color de fondo:

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

Trate »

Ejemplos

Consulte <div> en el número de elementos class = "secundarias" (usando NodeList la propiedad de longitud) son:

var x = document.getElementById ( "myDiv" ) .getElementsByClassName ( "hijo") .length;

x La salida es:

3

Trate »

Ejemplos

Modificar class = "ejemplo" elementos de la primera clase que se llama color de fondo "niño" y el elemento "color":

var x = document.getElementsByClassName ( "ejemplo" ) [1];
x.getElementsByClassName ( "Color de niño") [ 0] .style.backgroundColor = "red";

Trate »

Ejemplos

Modificar elemento <div> class = "niño" de todos los elementos del color de fondo:

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

Trate »

Artículos relacionados

CSS tutorial: selectores CSS

CSS Referencia: selectores CSS .class

Manual de HTML DOM Referencia: document.getElementsByClassName ()

HTML DOM Referencia: atributo className

Manual de HTML DOM Referencia: DOM HTML del objeto Estilo


Elementos objeto de referencia objeto Element