Metodo HTML DOM getElementsByClassName()
❮ L'oggetto elementoEsempio
Modifica il testo della prima voce di elenco con class="child" (indice 0) in una lista con class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Il metodo getElementsByClassName() restituisce una raccolta di elementi figlio di un elemento con il nome di classe specificato, come oggetto NodeList.
L'oggetto NodeList rappresenta una raccolta di nodi. È possibile accedere ai nodi tramite numeri di indice. L'indice inizia da 0.
Suggerimento: puoi utilizzare la proprietà length dell'oggetto NodeList per determinare il numero di nodi figlio con il nome di classe specificato, quindi puoi scorrere tutti i nodi ed estrarre le informazioni desiderate.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sintassi
element.getElementsByClassName(classname)
Valori dei parametri
| 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". |
Dettagli tecnici
| Versione DOM: | Oggetto elemento di livello 1 di base |
|---|---|
| Valore di ritorno: | Un oggetto NodeList, che rappresenta una raccolta di elementi figlio degli elementi con il nome di classe specificato. Gli elementi nella raccolta restituita vengono ordinati come appaiono nel codice sorgente. |
Altri esempi
Esempio
Cambia il colore di sfondo del secondo elemento con class="child" all'interno di un elemento <div>:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Esempio
Scopri quanti elementi con class="child" ci sono all'interno di un elemento <div> (usando la proprietà length dell'oggetto NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Esempio
Cambia il colore di sfondo del primo elemento con la classe "child" e "color" all'interno di un elemento con class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Esempio
Cambia il colore di sfondo di tutti gli elementi con class="child" all'interno di 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";
}
Pagine correlate
Esercitazione CSS: sintassi CSS
Riferimento CSS: Selettore CSS .class
Riferimento HTML DOM: document.getElementsByClassName()
Riferimento HTML DOM: proprietà className
Riferimento HTML DOM: proprietà classList
Riferimento HTML DOM: Oggetto stile HTML DOM
❮ L'oggetto elemento