Documento HTML DOM getElementsByClassName()
Esempio
Ottieni tutti gli elementi con class="example":
const collection = document.getElementsByClassName("example");
Ottieni tutti gli elementi con entrambe le classi "example" e "color":
const collection = document.getElementsByClassName("example color");
Altri esempi di seguito.
Definizione e utilizzo
Il getElementsByClassName()metodo restituisce una raccolta di elementi con uno o più nomi di classe specificati.
Il getElementsByClassName()metodo restituisce una HTMLCollection .
La getElementsByClassName()proprietà è di sola lettura.
Collezione HTML
Una HTMLCollection è una raccolta di nodi HTML.
È possibile accedere ai nodi in una raccolta tramite numeri di indice. L'indice inizia da 0.
La proprietà length restituisce il numero di elementi nella raccolta.
Guarda anche:
Il metodo Document getElementById()
Il metodo Document getElementsByTagName()
Il metodo Document querySelector()
Sintassi
document.getElementsByClassName(classname)
Parametri
| Parameter | Description |
| classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Valore di ritorno
| Tipo | Descrizione |
| Oggetto. | Un oggetto HTMLCollection . Una raccolta di elementi con il nome di classe specificato. Gli elementi vengono ordinati come appaiono nel documento. |
Altri esempi
Numero di elementi con class="esempio":
let numb = document.getElementsByClassName("example").length;
Cambia il colore di sfondo di tutti gli elementi con class="example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Pagine correlate
Esercitazione CSS: sintassi CSS
Riferimento CSS: Selettore CSS .class
Riferimento HTML DOM: elemento .getElementsByClassName()
Riferimento HTML DOM: proprietà className
Riferimento HTML DOM: proprietà classList
Riferimento HTML DOM: oggetto stile
Supporto browser
document.getElementsByClassName() è una funzionalità DOM di livello 1 (1998).
È completamente supportato in tutti i browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |