JavaScript getElementsbyClassName

In JavaScript, il metodo getElementsByClassName () è molto utile per accedere agli elementi che corrispondono a tutti i nomi delle classi passati come argomenti. Inoltre, restituisce un HTMLCollection che contiene ogni elemento discendente. Inoltre, questo metodo aiuta anche a recuperare gli elementi HTML richiesti, memorizzarli in variabili ed eseguire la funzionalità richiesta usando JavaScript.

Questo articolo guiderà sull'implementazione del "getElementsByClassName ()"Metodo in JavaScript.

Cos'è il metodo JavaScript getElementsByClassName ()?

IL "getElementsByClassName ()"Il metodo restituisce gli elementi con il nome della classe specificato, che viene superato come argomento. Restituisce un oggetto che ricorda un array di tutti gli elementi figlio con i nomi delle classi specificati. Inoltre, include la collezione HTML di tutti gli elementi figlio.

Come utilizzare il metodo JavaScript getElementsByClassName ()?

Ai fini dell'utilizzo del metodo JavaScript getElementsByClassName () in JavaScript, seguire la sintassi data:

elemento.getElementsByClassName (ClassName)

Nella sintassi data, "nome della classe"È l'argomento obbligatorio da approvare. È il valore della stringa che si riferisce a nomi di classe singola o più.

Esempio 1: recuperare un singolo elemento usando il metodo getElementByClassName ()
Nel seguente esempio, in primo luogo, creeremo un div, gli assegneremo una "classe" e aggiungeremo un po 'di testo:

Implementazione della classe

Ora, applica il "getElementsByClassName ()"Metodo per accedere a Div Creato passando il nome della classe come argomento:

var x = documento.getElementsByClassName ('Class');

Infine, visualizza il valore risultante sul DOM usando "documento.scrivere()" metodo. Questo restituirà un oggetto simile a un array:

documento.scrivere (x);

L'output corrispondente sarà:

Nell'output di cui sopra, [oggetto htmlcollection] si riferisce all'oggetto simile a un array.

Esempio 2: Fetching di più elementi usando il metodo getElementsByClassName ()
Nell'esempio seguente, in primo luogo, aggiungeremo tre caselle di controllo utilizzando il tag, assegneremo loro la stessa classe di "Lang"E aggiungi il testo richiesto come mostrato di seguito:

Pitone

JavaScript

Html

Ora, includi una casella di controllo aggiuntiva con il valore "Seleziona tutto”E allegare un"al clic()"Evento in modo che quando viene selezionata la casella di controllo,"controllo()"La funzione è chiamata con l'argomento"Questo"Come segue:

Seleziona tutto

Successivamente, nel file JavaScript, definisce una funzione chiamata "controllo()"Con una variabile denominata"Casella di controllo"Come argomento che si riferisce a"Questo"Specificato prima. Ora accedi alla casella di controllo utilizzando il documento.Metodo getElementsByClassName () e posizionare il valore dell'attributo della classe "Lang"Come il suo argomento. Infine, usa un “per"Loop per iterare ogni valore in una casella di controllo e utilizzare l'attributo" selezionato "per contrassegnare ciascun valore come selezionato:

Controllo della funzione (casella di controllo)
get = document.getElementsByClassName ('Lang');
per (var i = 0; iOttieni [i].Casella di controllo controllato =.controllato;

Produzione

Abbiamo compilato l'uso del metodo getElementsByClassName () usando vari esempi.

Conclusione

IL "getElementsByClassName ()"Il metodo restituisce gli elementi con il nome della classe specificato, che viene superato come argomento. Restituisce un oggetto che ricorda un array di tutti gli elementi figlio con i nomi delle classi specificati. È possibile utilizzare questo metodo per selezionare elementi HTML singoli o più. Questo articolo ha spiegato l'uso del metodo getElementsByClassName () usando vari esempi.