Método HTML DOM getElementsByClassName()
❮ El Objeto ElementoEjemplo
Cambie el texto del primer elemento de la lista con class="child" (índice 0) en una lista con class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El método getElementsByClassName() devuelve una colección de elementos secundarios de un elemento con el nombre de clase especificado, como un objeto NodeList.
El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.
Sugerencia: puede usar la propiedad de longitud del objeto NodeList para determinar la cantidad de nodos secundarios con el nombre de clase especificado, luego puede recorrer todos los nodos y extraer la información que desea.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sintaxis
element.getElementsByClassName(classname)
Valores paramétricos
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Detalles técnicos
| Versión DOM: | Objeto de elemento de nivel básico 1 |
|---|---|
| Valor devuelto: | Un objeto NodeList, que representa una colección de los elementos secundarios de los elementos con el nombre de clase especificado. Los elementos de la colección devuelta se ordenan tal como aparecen en el código fuente. |
Más ejemplos
Ejemplo
Cambia el color de fondo del segundo elemento con class="child" dentro de un elemento <div>:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Ejemplo
Averigüe cuántos elementos con class="child" hay dentro de un elemento <div> (usando la propiedad de longitud del objeto NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Ejemplo
Cambie el color de fondo del primer elemento con la clase "hijo" y "color" dentro de un elemento con class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Ejemplo
Cambia el color de fondo de todos los elementos con class="child" dentro de un elemento <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
páginas relacionadas
Tutorial CSS: Sintaxis CSS
Referencia CSS: CSS .class Selector
Referencia HTML DOM: document.getElementsByClassName()
Referencia HTML DOM: propiedad className
Referencia HTML DOM: propiedad classList
Referencia HTML DOM: objeto de estilo HTML DOM
❮ El Objeto Elemento