Metodo getElementsByClassName() dell'elemento HTML DOM

Definizione e uso

getElementsByClassName() Il metodo restituisce una raccolta di elementi figli con il nome di classe dato, come oggetto NodeList.

Vedi anche:

Proprietà classList

Proprietà className

Metodo querySelector()

Metodo querySelectorAll()

Metodo getElementsByTagName()

Oggetto Style HTML DOM

Tutorial:

Sintassi CSS

Selettore CSS

Manuale di riferimento dei selettori CSS

NodeList

NodeList È una raccolta di nodi simili a un array (lista).

Puoi accedere ai nodi nella lista tramite l'indice (indice). L'indice parte da 0.

Proprietà lengthRestituisce il numero di nodi nella lista.

Esempio

Esempio 1

Modifica il testo del primo elemento della lista utilizzando class="child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Prova personalmente

Esempio 2

Il numero di elementi class="child" all'interno di "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Prova personalmente

Esempio 3

Modifica la dimensione del secondo elemento di class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Prova personalmente

Esempio 4

Usa le classi "child" e "color" nella seconda elemento con class="example" per cambiare la dimensione del primo elemento:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Prova personalmente

Esempio 5

Cambia il colore di tutti gli elementi con class="child" all'interno di "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Prova personalmente

Sintassi

element.getElementsByClassName(classname)

Parametro

Parametro Descrizione
classname

Obbligatorio. Nome della classe del figlio.

Separare più nomi con spazi (ad esempio "child color").

Valore di ritorno

Tipo Descrizione
NodeList

Figli degli elementi che contengono il nome della classe specificato.

Gli elementi sono ordinati secondo l'ordine in cui compaiono nel codice sorgente.

Supporto del browser

element.getElementsByClassName() È una caratteristica di DOM Level 1 (1998).

Tutti i browser lo supportano completamente:

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