I diversi modi per selezionare gli elementi HTML con JavaScript

Finalmente ci siamo, abbiamo passato le scorse sette lezioni a parlare di teoria. A questo punto dovresti essere in grado di comprendere termini come variabili, tipi di valore, operatori, funzioni, proprietà e metodi; adesso è giunto il momento di interagire con i nostri elementi HTML!

Non so se con la precedente frase ho passato un messaggio del tipo “che noia la teoria”, perché non è affatto così, ma allo stesso tempo non voglio modificare quanto appena detto perché in te potrebbe essere nato questo sentimento.

Ebbene, scrollatelo immediatamente di dosso perché d’ora in avanti andremo a divertirci e inizieremo proprio con il botto.

Inizieremo scoprendo come sia possibile selezionare un elemento HTML attraverso il codice JavaScript per poi proseguire verso le varie proprietà e metodi che ci permetteranno di modificarlo.

Seleziona qualsiasi elemento presente in una pagina

Se hai già seguito il corso sulle Fondamenta del Web Design oppure se questo non è il tuo primo rodeo nel mondo dello sviluppo web, dovresti sapere come poter sfruttare i selettori CSS per selezionare gli elementi che sono presenti all’interno di una pagina web.

Se così non dovesse essere ti consiglio di andare immediatamente a seguire il corso dedicato perché in questa lezione non mi fermerò a spiegare termini ormai comuni come ID e classi.

Rinvangando nella memoria, un selettore CSS con il carattere # serve per indicare un ID mentre con il . è possibile indicare una classe. Con JavaScript tutto questo non accade, ai tempi della prima stesura di questo linguaggio i CSS non erano ancora padroni dello stile delle nostre pagine web e si è sempre preferito operare in modo diverso…

document.getElementById( "tit" );
document.getElementsByClassName( "pari" );
document.getElementsByTagName( "p" );

Ecco che ti presento i tre metodi principali che ti permetteranno di selezionare, rispettivamente:

un elemento in base al suo ID;
una serie di elementi con specifiche classi CSS;
gli stessi elementi presenti nella pagina.

Ho parlato di metodi perché quelli che ti ho presentato sono tutti, appunto, dei metodi che puoi utilizzare grazie all’elemento document. Se non ti ricordi bene che cosa sia il Document Object Model (per gli amici DOM), ti consiglio di tornare a leggerne la descrizione presente all’interno della prima lezione di questo corso; ti sarà molto utile fare un ripasso sia per comprendere meglio i concetti in questa lezione che nel tuo lavoro 😉

Ovviamente per la buona riuscita di questa lezione dovrai avere una pagina HTML sulla quale lavorare!

Come ormai dovresti sapere all’interno del repository su GitHub troverai tutti i file che compongono questo corso ma se preferisci i file di questa lezione all’interno di un archivio .zip non devi far altro che scaricarlo da questo link.

Per la necessità che abbiamo in questa lezione ti presenterò anche l’intera pagina HTML sulla quale andremo a lavorare:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Lezione 8 - I Diversi modi per Selezionare gli Elementi HTML</title>
</head>
<body>
  <h1 id="tit">I Diversi modi per Selezionare gli Elementi HTML</h1>
  <p>Piacere io mi chiamo Andrea!</p>
  <p>Scoprire JavaScript &egrave; bello perch&eacute; permette di:</p>
  <ul>
    <li>agire sul DOM</li>
    <li class="pari">creare animazioni</li>
    <li>programmare ad oggetti</li>
    <li class="pari">e molto altro...</li>
  </ul>

    <script src="/js/script.js"></script>
</body>
</html>

Come puoi notare il codice HTML presente dovrebbe essere per te di facile lettura, comunque sia questa pagina ha qualcosa di diverso rispetto alle precedenti…

Tutto risiede nella posizione della chiamata al file script.js che precedentemente avevamo posizionato all’interno dell’elemento <head>, mentre adesso si trova immediatamente prima la chiusura di <body>.

Sai immaginarti il motivo di questo spostamento? Fermati a pensare per un attimo prima di continure a leggere.

Il motivo si cela nel come i browser caricano le nostre pagine web e vanno a popolare il DOM.

Come dovresti aver capito dalla sua descrizione, il DOM è qualcosa che viene costruito sul momento, man mano che il browser legge e comprende il codice HTML presente nella pagina.

È considerata buona pratica aggiungere il codice JavaScript che andrà a lavorare con questo oggetto quando il browser è stato in grado di conoscere tutti gli elementi e di inserirli nel DOM, tra l’altro questa pratica migliora anche le prestazioni del nostro sito web dato che la pagina verrà renderizzata completamente prima ancora di andare a leggere una singola riga di codice JavaScript 😀

Ricorda sempre quindi che se il tuo codice JavaScript va a modificare il DOM dovrà essere richiamato alla fine della pagina HTML, prima della chiusura dell’elemento <body>.

Cosa ci viene restituito?

Adesso hai le conoscenze necessarie per andare a selezionare i tuoi elementi, conosci i metodi principali e sai che il tuo script dovrà essere richiamato quando il browser ha costruito il DOM; che cosa dobbiamo aspettarci da questi metodi?

Ovviamente i risultati sono diversi in base al metodo che è stato chiamato. Nel caso di getElementByID() ci verrà restituito il riferimento all’oggetto presente nel DOM che potremo comodamente consultare, se invece il browser non è in grado di trovare un elemento contenente l’ID specificato ci restiuirà un valore di nullità (null); comune in JavaScript per comunicarci che la variabile, o in questo caso il metodo, non restituisce alcun valore.

L’immagine sopra mostra alcune componenti degli strumenti da sviluppatore presenti in Firefox Developer Edition, la console (che tendenzialmente trovi a sinistra mentre in questo screenshot è sopra) ti presenta l’elemento HTML (l’oggetto DOM per essere precisi) selezionato e nel pannello sulla destra (che nello screenshot si trova sotto) sono elencate tutte le proprietà di questo oggetto; proprietà che potrai modificare grazie a JavaScript!

Ma se getElementById() ci mostra un unico oggetto (mica possiamo avere ID identici all’interno della stessa pagina HTML 😉 ), il discorso è leggermente diverso quando andiamo ad analizzare metodi come getElementsByClassName() o getElementsByTagName() perché a differenza del primo questi devono restituire una lista di elementi che rispondono alle caratteristiche cercate!

Ti ho appena detto che questi ultimi due metodi ci restituiranno delle liste contenenti gli oggetti selezionati, ma devo ammettere che non sono stato sincero al 100% perché la lista non è altro che un nuovo tipo di oggetto che ancora non ti ho presentato.

Gli array, oggetti dalle molte funzionalità

Non ti ho presentato molti degli oggetti che potrai utilizzare in JavaScript ma questo sopratutto perché non è un corso dedicato alla programmazione a oggetti, per questo dovrai aspettarne uno nuovo.

Quello che intanto posso fare è iniziare a descriverti i tipi fondamentale di oggetti che ti permetteranno di velocizzare la stesura del tuo codice e di essere incredibilmente più produttivo.

Tra l’altro in questa sezione dovrò mostrarti come si crea un oggetto e spiegarti la sua sintassi, ma non credi sia meglio scoprire che cosa sia un Array prima?!?

Ebbene un Array non è altro che un tipo di oggetto che ci permette di contenere al suo interno un numero infinito di valori differenti. Praticamente se una variabile è un grado di contenere un unico valore, grazie agli Array questo limite non è più presente e puoi inserire al suo interno tutto quello che desideri.

var arr = new Array();

La sintassi che ti ho appena presentato utilizza la parola chiave new che permette di creare un nuovo oggetto e di salvarlo all’interno della variabile di nome arr. In questo contesto stiamo creando un oggetto molto particolare, l’oggetto Array() appunto, che presenta proprietà e metodi specifici.

Andiamo intanto a vedere come sia possibile inizializzare un oggetto Array inserendo una serie di valori, oltre a questo scopriremo anche una nuova sintassi che ci permette di scrivere meno caratteri!

var standard = new Array( "Andrea", "Eugenio", "Daniele" );
var letterale = [ "Andrea", "Eugenio", "Daniele" ];

Con questo blocco di codice ti ho mostrato come creare due Array che contengono gli stessi valori, il nome della variabile rispecchia la sintassi utilizzata anche se non sono molto soddisfatto della seconda che nonostante tutto è la traduzione del termine literal che viene utilizzato in inglese.

La cosa interessante è che con la seconda sintassi possiamo salvare un sacco di caratteri e il nostro sviluppo sarà ancora più semplice da leggere 🙂

Se usare una variabile era utile perché si poteva utilizzare il suo nome per richiamare il valore contenuto al suo interno, con un Array diventa necessario conoscere la posizione del valore al suo interno. Ed ecco un concetto che è bene approfondire quando si parla di Array, il proprio indice…

Quelle che vedi evidenziate con il colore arancione sono le posizioni che i vari elementi, o valori, occupano all’interno dell’Array; ovvero ne descrivono l’indice.

Adesso che sai che esiste questo strumento la domanda successiva che potrebbe balenarti in mente è: che me ne faccio?!?

Ebbene come dicevo prima, un indice permette di accedere ai valori contenuti in un Array e di richiamarli per un futuro utilizzo, guardiamo questo semplice esempio:

console.log( letterale[1] ); // Stampa "Eugenio"

Hai provato ad eseguire questo codice all’interno della tua console? Hai notato che il nome stampato è “Eugenio”? Ebbene, sapresti dirmi perché?

Questo è un argomento che abbiamo affrontato nella scorsa lezione, nello specifico quando hai conosciuto la proprietà length presente nelle stringhe: i computer contano da zero. E questo è vero anche per gli indici! Se, ad esempio, volevi selezionare il mio nome, avresti dovuto scrivere letterale[0] e lo avresti letto all’interno della tua console 😀

Nell’esempio ti ho mostrato come sia possibile estrapolare il valore contenuto all’interno di un determinato indice attraverso la variabile letterale, ma sarebbe funzionato anche se avessi chiamato la variabile standard; la cosa importante è utilizzare le parentesi quadre ([]) successivamente al nome della nostra variabile e indicare la posizione cercata.

Ci sono molte altre proprietà e metodi che potremmo scoprire sugli Array, se sei un tipo affamato ti consiglio di consultare la pagina di MDN perché come ti ho anticipato precedentemente l’argomento oggetti è qualcosa che andremo ad approfondire in un corso futuro; intanto torniamo a controllare i diversi metodi per selezionare gli oggetti nel DOM.

Cicliamo un array di elementi

In fin dei conti ti ho introdotto gli Array per un semplice fatto, i metodi getElementsByClassName() e getElementsByTagName() restituiscono entrambi un oggetto Array che dovrai essere in grado di interrogare se vuoi scoprire quali sono i valori delle proprietà contenute al suo interno.

In questo contesto torna molto comoda una tipologia di ciclo che abbiamo analizzato nelle lezioni precedenti: il ciclo for.

Diciamo ad esempio che vogliamo analizzare gli elementi selezionati e cambiare soltanto se incontriamo la parola oggetti all’interno del testo contenuto in un elemento lista <li>.

Questo semplice problema che ti permetterà di ripassare diversi concetti che abbiamo incontrato durante questo corso, ti va di fare un po’ di ripasso assieme?

Ad esempio, cerchiamo di fare una piccola lista di funzionalità che dovrà avere il nostro codice:

in grado di accedere agli elementi <li> presenti nella nostra pagina;
accedere alle stringe contenute nell’elemento;
cercare una determinata parola;
sostituire la parola con un’altra.

Ed ecco il codice che potremmo sviluppare per creare il ciclo necessario a risolvere questo problema:

var el = document.getElementsByTagName( "li" );

for( var i = 0; i < el.length; i++ ){
  console.log( el[i].innerHTML );
}

Per prima cosa ti ricordo che stiamo lavorando con il file index.html che è presente all’interno della cartella contenente il codice per questa lezione che contiene 4 elementi <li>.

Il nostro intento è stato quindi quello di utilizzare il linguaggio JavaScript per trovare gli stessi elementi e di salvarli all’interno della variabile el.

Successivamente abbiamo creato un loop for che ci ha permesso di ciclare all’interno dell’Array che è stato creato dal metodo getElementsByTagName() grazie alla proprietà length.

Proprio come per le stringhe, questa proprietà ci permette di conoscere il numero di elementi presenti all’interno di un Array (che nel nostro esempio sono 4), ma dobbiamo ricordarci che questo è una dei rari casi dove il nostro computer inizia a contare da 1.

Se non mi credi prova a stampare, anche fuori dal ciclo, console.log( el[4] ) e noterai che all’interno della console troverai semplicemente un messaggio di undefined, ovvero che il nostro Array non contiene assolutamente niente :O

Per questo motivo, all’interno della condizione del nostro for, ho preferito specificare che il ciclo dovrà continuare fintanto che la variabile di controllo i risulta minore (<) del numero di elementi contenuti nel nostro Array; così facendo il nostro ciclo eseguirà l’ultimo giro utilizzando come indice il valore 3 che identifica l’ultimo valore contenuto. Oltre a questo vorrei farti notare che all’interno del metodo console.log() è stata utilizzata la proprietà innerHTML che ci permette di scoprire (e modificare) il contenuto dell’elemento sul quale stiamo lavorando.

Un piccolo esempio delle modifiche che possiamo fare agli elementi HTML lo trovi proprio con il codice che ti presento qua sotto, come puoi notare la sintassi che ho inserito ci permette di inserire tra parentesi tonde l’indice che stiamo utilizzando per accedere all’elemento stesso:

var el = document.getElementsByTagName( "li" );

for( var i = 0; i < el.length; i++ ){
  el[i].innerHTML = el[i].innerHTML + " ( indice: " + i + " )";
}

Se esegui questo codice all’interno del tuo browser noterai che sei in grado di modificare il codice HTML che compone la pagina stessa, questo è un grande potere che ci mette a disposizione JavaScript e man mano che proseguiamo con questo corso ci sarà da divertirsi ancora di più!

Una cosa che voglio descriverti prima ancora di saltare nella prossima sezione è l’utilizzo dell’operatore + che, quando utilizzato con le stringhe, non esegue la classica addizione bensì ci permette di concatenare più stringhe andando a crearne una sola. Questa caratteristica è molto interessante e ci permetterà di eseguire lavori più approfonditi con questi tipi di dati.

Come usare i selettori CSS in JavaScript

I metodi che ti ho mostrato in questa lezione sono molto veloci in fase di esecuzione e permettono di avere il pieno controllo sul DOM che compone la nostra pagina, purtroppo non sono molto intuitivi perché non permettono di utilizzare un tipo di selettori che già conosciamo, i selettori CSS.

Con i metodi precedenti siamo costretti a utilizzare un metodo per ogni tipo di selettore, se vogliamo selezionare un elemento in base al suo ID siamo costretti ad usare getElementById(), se vogliamo selezionare degli elementi in base al loro nome abbiamo getElementsByTagName() mentre se vogliamo selezionarli in base alle classi utilizzate abbiamo getElementsByClassName().

Questi sono soltanto alcuni dei metodi che puoi utilizzare in JavaScript per selezionare i tuoi elementi HTML, ma diciamoci la verità sono lunghi da scrivere e difficili da ricordare!

Per fortuna negli ultimi anni le nuove versioni di questo linguaggio sono migliorate parecchio e forse la cosa più comoda che è stata introdotta sono state proprio le Selectors API che hanno introdotto due nuovi metodi davvero interessanti:

querySelector() – grazie a questo metodo possiamo richiamare il primo elemento che corrisponde a quello che stiamo cercando e salvarlo all’interno di una variabile per riutilizzarlo successivamente;
querySelectorAll() – al contrario del precedente questo ci permette di avere un Array, proprio come l’esempio precedente, che racchiude tutti gli elementi che rispondono alla query cercata.

Questi due metodi non sono utili soltanto perché sono più semplici da ricordare rispetto ai precedenti ma la cosa ancora più comoda è che all’interno delle loro parentesi tonde è possibile inserire qualsiasi selettore CSS per aiutarci a selezionare meglio gli elementi di cui abbiamo bisogno.

Riprendiamo per un attimo il nostro codice HTML, negli elementi lista che ho inserito è presente class="pari" che ci permette di selezionare gli elementi pari che sono presenti nella nostra lista non ordinata.

Se sai utilizzare bene i tuoi CSS dovresti sapere che esiste una pseudo-classe che ci permette di selezionare questi elementi senza la necessità di questa classe e questo ci permetterebbe di mantenere il nostro codice più pulito e performante.

Con i metodi che abbiamo conosciuto nella sezione precedente (getElementById(), getElementsByTagName(), getElementsByClassName()) riuscire a selezionare gli elementi pari senza l’aggiunta delle classi sarebbe stato un lavoro veramente duro da fare, ma con il metodo querySelectorAll() è un gioco da ragazzi! Prova tu stesso ad eseguire questo codice:

var el = document.querySelectorAll( " ul li:nth-child(even) " );

for( var i = 0; i < el.length; i++ ){
  console.log( el[i].innerHTML );
}

Grazie a querySelectorAll() hai la possibilità di utilizzare :nth-child() (la pseudo-classe alla quale facevo riferimento) che è veramente potente quando devi muoverti all’interno del DOM per selezionare specifici elementi 😉

Attenzione tra Array e NodeList

Prima di concludere voglio lanciare un piccolo avvertimento, giusto per mantenere complete le informazioni contenute in questa lezione.

Fino a ora ti ho presentato i metodi getElementsByTagName(), getElementsByClassName() e querySelectorAll() con l’unica differenza che i primi sono in grado di selezionare gli elementi sotto strette specifiche mentre il secondo può selezionare qualsiasi elemento corrispondende a un selettore CSS.

A parte questa differenza sembra che tutti siano comunque in grado di salvare gli elementi trovati all’interno di un Array, però non è esattamente così…

I primi due metodi sono in grado di creare delle NodeList, ovvero degli oggetti molto particolari che vengono messi a disposizione dal DOM che sono in grado di modificarsi automaticamente a seconda delle modifiche sugli elementi selezionati. Facciamo un piccolo esempio giusto per chiarire il tutto:

var el = document.getElementsByTagName( "li" );
var elqSA = document.querySelectorAll( "li");

Ad un primo sguardo può sembrare che la variabile el sia identica a elqSA ma se con JavaScript andiamo a rimuovere il primo list item presente nella nostra pagina HTML soltanto la variabile el sarà in gradi di rappresentare questa modifica, mentre elqSA continuerà a mostrare i quattro li che aveva selezionato inizialmente.

Conclusioni

Ebbene siamo giunti alla fine di questa lezione dove per la prima volta all’interno di questo corso abbiamo spostato la nostra attenzione dalla programmazione in generale al vero potere di JavaScript: poter interagire con il codice presente all’interno delle nostre pagine HTML.

Tutto quello che hai appreso finora ti sarà sicuramente utile per lavorare con qualsiasi linguaggio di programmazione perché anche se le sintassi sono diverse, i concetti base restano gli stessi; il valore aggiunto di JavaScript è che con questo linguaggio hai l’opportunità di giocare con gli elementi di una pagina web e di modificarla in base alle azioni intraprese dai tuoi visitatori!

Siamo giunti quasi al termine di questo corso ma nelle ultime lezioni andremo a scoprire come sia possibile animare gli elementi HTML e come rispondere agli eventi che succedono durante l’utilizzo della nostra pagina web. Come sempre dovrai essere in grado di superare il quiz che ti aspetta e rispondere alle domande che ti ho preparato prima di poter proseguire nella prossima lezione 😉

JavaScript, il linguaggio dinamico del web