Esempio
Modificare il testo del primo elemento della lista con class = "bambino" (index 0) in un elenco con class = "example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Prima di modificare il testo:
- Coffee
- Tea
Dopo aver cambiato il testo:
- Milk
- Tea
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
Il getElementsByClassName() metodo restituisce un insieme di elementi figlio di un elemento con il nome della classe specificato, come un oggetto NodeList.
L'oggetto NodeList rappresenta un insieme di nodi. I nodi possono essere accessibili da numeri di indice. L'indice parte da 0.
Suggerimento: È possibile utilizzare la lunghezza di proprietà dell'oggetto NodeList per determinare il numero di nodi figlio con il nome della classe specificato, allora si può collegare attraverso tutti i nodi ed estrarre le informazioni che desidera.
Supporto browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sintassi
element .getElementsByClassName( classname )valori dei parametri
| Parametro | Tipo | Descrizione |
|---|---|---|
| classname | String | Necessario. Il nome della classe degli elementi secondari che si desidera ottenere. Per verificare i nomi delle classi multiple, separarli con spazi, come "child color" . |
Dettagli tecnici
| DOM Versione: | Nucleo Livello 1 elemento OBJECT |
|---|---|
| Valore di ritorno: | Un oggetto NodeList, rappresenta un insieme di elementi figlio degli elementi con il nome della classe specificato. Gli elementi della collezione restituita sono ordinati come appaiono nel codice sorgente. |
Altri esempi
Esempio
Cambiare il colore del secondo elemento di sfondo con class = "bambino" all'interno di un <div> elemento:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red"; Prova tu stesso " Esempio
Scopri come molti elementi con class = "bambino" ci sono all'interno di un <div> elemento (usando la proprietà length dell'oggetto NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;Il risultato di x sarà:
3 Prova tu stesso " Esempio
Cambiare il colore del primo elemento sia con il fondo "child" e "color" di classe all'interno di un elemento con class = "example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red"; Prova tu stesso " Esempio
Cambiare il colore di tutti gli elementi con class = "bambino" all'interno di uno sfondo <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";
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS selettori
CSS Riferimento: CSS .class Selector
HTML DOM Riferimento: documento. getElementsByClassName()
HTML DOM Riferimento: className Property
HTML DOM Riferimento: classList Property
HTML DOM Riferimento: HTML DOM Object Style