Esempio
Ottenere tutti gli elementi con il nome della classe specificato:
var x =
document.getElementsByClassName("example");
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
Il getElementsByClassName() restituisce una raccolta di tutti gli elementi del documento 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 elementi con un nome di classe specificato, allora si può scorrere tutti gli elementi 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
document.getElementsByClassName( classname )valori dei parametri
| Parametro | Tipo | Descrizione |
|---|---|---|
| classname | String | Necessario. Il nome della classe degli elementi che si desidera ottenere. Per verificare i nomi delle classi multiple, separarli con spazi, come "test demo" . |
Dettagli tecnici
| DOM Versione: | Nucleo livello di oggetto di documento 1 |
|---|---|
| Valore di ritorno: | Un oggetto NodeList, rappresenta un insieme di elementi con il nome classe specificato. Gli elementi della collezione restituita sono ordinati come appaiono nel codice sorgente. |
Altri esempi
Esempio
Ottenere tutti gli elementi sia con il "example" e "color" classi:
var x =
document.getElementsByClassName("example color"); Prova tu stesso " Esempio
Scopri come molti elementi con class = "example" ci sono nel documento (utilizzando la proprietà length dell'oggetto NodeList):
var x =
document.getElementsByClassName("example").length; Prova tu stesso " Esempio
Cambiare il colore di tutti gli elementi con class = "example" background:
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS selettori
CSS Riferimento: CSS .class Selector
HTML DOM Riferimento: elemento. getElementsByClassName()
HTML DOM Riferimento: className Property
HTML DOM Riferimento: classList Property
HTML DOM Riferimento: stile di oggetto