Il metodo getElementsByClassName() viene utilizzato per selezionare o ottenere gli elementi tramite il valore del nome della classe. Questo metodo DOM restituisce un oggetto simile ad un array costituito da tutti gli elementi aventi il nome classe specificato. Chiamando il metodo getElementsByClassName() su un particolare elemento, cercherà l'intero documento e restituirà solo quegli elementi che corrispondono al nome della classe specificato o fornito.
Sintassi
var ele=document.getELementsByClassName('name');
Qui, name è l'argomento obbligatorio da passare. È la stringa che specifica un singolo nome di classe o più nomi di classi da abbinare.
Esempio del metodo getElementsByClassName()
Vediamo alcuni esempi per conoscere e comprendere l'implementazione pratica del metodo.
Esempio
È una semplice implementazione di classe che restituisce un oggetto simile ad un array quando si invoca la variabile x.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
Produzione:
Allo stesso modo, possiamo implementare il metodo getElementsByClassName() per restituire raccolte di elementi per più classi.
Differenza tra i metodi getElementsByClassName(), querySelector() e querySelectorAll()
getElementsByClassName(): Corrisponde agli elementi con il nome della classe specificata e restituisce un insieme di elementi corrispondenti. Gli elementi restituiti sono raccolte di elementi HTML live. Questi elementi live possono essere ulteriormente aggiornati se vengono apportate modifiche al Document Object Model.
querySelector(): Restituisce solo un singolo elemento che corrisponde al nome classe specificato. Se non trova alcun elemento corrispondente, restituisce null.
Il punto principale da capire è che tutti i metodi sopra descritti restituiscono un elemento o una lista, ma il metodo getELementsByClassName() serve dinamico aggiornamento, e gli altri due metodi servono per il file statico .