JavaScript getElementsByClassName (Italiano)

Riepilogo: in questo tutorial imparerai come utilizzare il metodo getElementsByClassName() per selezionare gli elementi in base al nome della classe.

Introduzione al metodo getElementsByClassName ()

Ogni elemento HTML ha un attributo di classe opzionale come questo:

Code language: HTML, XML (xml)

Il valore dellattributo class è un elenco separato da spazi delle classi dellelemento. Le classi fanno distinzione tra maiuscole e minuscole.

Le classi ti consentono di utilizzare il CSS per abbinare gli elementi. Ad esempio:

Code language: CSS (css)

In JavaScript, utilizzi il metodo getElementsByClassName() per selezionare gli elementi in base alle loro classi.

Il metodo getElementsByClassName() è disponibile sulloggetto document e su qualsiasi elemento HTML.

getElementsByClassName() accetta un singolo argomento che è una stringa che contiene uno o più nomi di classi:

Code language: JavaScript (javascript)

In questo sintassi, il parametro classNames è una stringa che rappresenta il nome di una classe da abbinare. Ad esempio:

Code language: JavaScript (javascript)

Se fai corrispondere gli elementi in base a più classi, devi utilizzare degli spazi per separarli in questo modo:

Code language: JavaScript (javascript)

Tieni presente che non puoi utilizzare selettori di classe, ad esempio .btn o .btn-primary per getElementsByClassName().

Il metodo getElementsByClassName() restituisce un HTMLCollection live di elementi, che è un oggetto simile ad un array.

Se chiami il metodo getElementsByClassName() sulloggetto document, il metodo cerca per gli elementi con i nomi di classe specificati nellintero documento.

Tuttavia, quando chiami il metodo getElementsByClassName() su un elemento specifico, restituisce solo gli elementi corrispondenti nel sottostruttura di quellelemento.

Esempi JavaScript getElementsByClassName ()

Facciamo alcuni esempi di utilizzo del metodo getElementsByClassName().

Supponi di avere il seguente codice HTML:

1) Richiamo di JavaScript getElementsByClassName () su un esempio di elemento

Lesempio seguente illustra come utilizzare il metodo getElementsByClassName() per selezionare <li> elementi che sono i discendenti dellelemento <ul>:

Risultato:

Code language: JavaScript (javascript)

Come funziona:

• Innanzitutto, seleziona lelemento <ul> con il nome della classe menu utilizzando il metodo getElementById().
• Quindi, seleziona gli elementi <li>, che sono i discendenti degli elementi <ul>, utilizzando il metodo getElementsByClassName().
• Infine, crea un array del contenuto di testo di <li> prendendo in prestito il metodo map() delloggetto Array.

2) Chiamare JavaScript getElementsByClassName () nellesempio del documento

Per cercare lelemento con il class heading-secondary, utilizzi il seguente codice:

Output:

Code language: JavaScript (javascript)

Questo esempio chiama il metodo getElementsByClassName() sulloggetto document, quindi cerca gli elementi con la classe heading-secondary nellintero documento.

In questo tutorial hai imparato a utilizzare il metodo getElementsByClassName() per selezionare elementi in base a uno o più nomi di classi.