Metodo getElementsByClassName() del documento HTML DOM

Definizione e uso

getElementsByClassName() Il metodo restituisce una raccolta di elementi con il nome della classe specificato.

getElementsByClassName() Il metodo restituisce HTMLCollection.

getElementsByClassName() L'attributo è readonly.

HTMLCollection

HTMLCollection È una raccolta di elementi HTML simile a un array (elenco).

È possibile accedere agli elementi della raccolta tramite un'indice (partendo da 0).

length L'attributo restituisce il numero di elementi nella raccolta.

Vedi anche:

Metodo getElementById()

Metodo getElementsByTagName()

Metodo querySelector()

Metodo querySelectorAll()

Oggetto HTMLCollection

Esempio

Esempio 1

Ottieni tutti gli elementi con la classe "example":

const collection = document.getElementsByClassName("example");

Prova te stesso

Esempio 2

Ottieni tutti gli elementi che hanno contemporaneamente le classi "example" e "color":

const collection = document.getElementsByClassName("example color");

Prova te stesso

Esempio 3

Numero di elementi con class="example":

let numb = document.getElementsByClassName("example").length;

Prova te stesso

Esempio 4

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";
}

Prova te stesso

Sintassi

document.getElementsByClassName("classname)

Parametro

Parametro Descrizione
classname

Obbligatorio. Nome della classe dell'elemento.

Ritorna più classi separate da spazi, ad esempio "test demo".

Valore di ritorno

Tipo Descrizione
Oggetto

Oggetto HTMLCollection.

Raccolta degli elementi con il nome della classe specificato.

Ordina gli elementi in base all'ordine di apparizione nel documento.

Supporto del browser

document.getElementsByClassName() È una caratteristica del DOM Level 1 (1998).

Tutti i browser lo supportano:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto

Pagine correlate

Corso di CSS:Sintassi CSS

Manuale di riferimento CSS:Selettore .class CSS

Manuale di riferimento HTML DOM:element.getElementsByClassName()

Manuale di riferimento HTML DOM:Proprietà className

Manuale di riferimento HTML DOM:Proprietà classList

Manuale di riferimento HTML DOM:Oggetto Style