Come evitare la frustrazione scegliendo il giusto selettore JavaScript

Una guida rapida su come i selettori influenzano il tuo codice

Mentre lavoravo a un progetto, ho riscontrato un problema nel mio codice. Stavo tentando di definire più elementi HTML in una raccolta e quindi di modificarli in base ad alcune condizioni predefinite. Ho lottato per circa quattro ore di programmazione (per due giorni) eseguendo il debug del mio codice e cercando di capire perché non stavo ottenendo il risultato desiderato.

Ho scoperto che avevo usato document.querySelectorAll () per assegnare i miei elementi a una variabile, e quindi stavo tentando di modificarli. L'unico problema è che quel particolare selettore JavaScript restituisce un elenco di nodi statici. Dato che non è una rappresentazione live degli elementi, non sono stato in grado di modificarli in seguito nel mio codice.

ipotesi

In questo articolo, presumo che alcune cose siano vere:

  • Stai lavorando in JavaScript "plain or vanilla" (nessun framework / libreria)
  • Hai una conoscenza di base degli elementi / selettori JavaScript
  • Hai una conoscenza di base del DOM

Il Nitty-gritty

Nel caso in cui abbia assunto troppo, ho fornito collegamenti a materiale pertinente all'interno dell'articolo che spero possa essere utile.

JavaScript è un ecosistema così vasto e ricco che non sorprende che ci siano molti modi per svolgere lo stesso compito. A seconda del compito, il modo in cui viene realizzato conta fino a un certo punto.

Puoi scavare una buca con le mani, ma è molto più facile ed efficiente farlo con una pala.

A tal fine, spero di "consegnarti una pala" dopo aver letto questo articolo.

Scegliere lo strumento giusto per il lavoro

Ho avuto la domanda "Quale selettore di elementi dovrei usare?" Più volte. Fino ad ora, non ho avuto molto desiderio o bisogno di imparare la differenza finché il mio codice ha prodotto il risultato desiderato. Dopo tutto, che importanza ha il colore del taxi, purché ti porti a destinazione in modo sicuro e tempestivo ... giusto?

Cominciamo con alcuni dei modi per selezionare gli elementi DOM in JavaScript. Ci sono più modi (credo) di selezionare elementi, ma quelli elencati qui sono di gran lunga i più diffusi che abbia mai incontrato.

document.getElementById ()

Questi restituiranno sempre solo un (1) elemento perché, per loro natura, gli ID sono unici e sulla pagina può essercene solo uno (con lo stesso nome) alla volta.

Restituisce un oggetto che corrisponde alla stringa passata al suo interno. Restituisce null se non viene trovato alcun ID corrispondente nel tuo HTML.

Esempio di sintassi -> document.getElementById ("main_content")

A differenza di alcuni selettori che vedremo più avanti nell'articolo, non è necessario che # indichi un ID elemento.

document.getElementsByTagName ()

Notare la "S" negli elementi - questo selettore restituisce multipli in una struttura simile ad una matrice nota come una raccolta HTML - viene cercato tutto il documento incluso il nodo radice (l'oggetto documento) per un nome corrispondente. Questo selettore di elementi inizia nella parte superiore del documento e continua verso il basso, alla ricerca di tag che corrispondono alla stringa passata.

Se stai cercando di utilizzare metodi di array nativi, sei sfortunato. Cioè, a meno che non si convertano i risultati restituiti in un array per iterare su di essi o utilizzare l'operatore di diffusione ES6, entrambi i quali non rientrano nell'ambito di questo articolo. Ma volevo che sapessi che è possibile utilizzare metodi array se lo desideri.

Esempio di sintassi -> document.getElementsByTagName ("link_header"). Questo selettore accetta anche p, div, body o qualsiasi altro tag HTML valido.

document.getElementsByClassName ()

Selettore del nome della classe - notate ancora la "S" negli elementi - questo selettore restituisce multipli in una struttura simile ad una matrice nota come una raccolta HTML di nomi di classe. Corrisponde alla stringa passata (può assumere più nomi di classe, sebbene siano separati da uno spazio), cerca in tutto il documento, può essere chiamato su qualsiasi elemento e restituisce solo i discendenti della classe passata.

Anche no . (punto) è necessario per indicare il nome della classe

Esempio di sintassi -> document.getElementsByClassName ("className")

document.querySelector ()

Questo selettore restituirà solo un (1) elemento.

Verrà restituito solo il primo elemento corrispondente alla stringa passata. Se non viene trovata alcuna corrispondenza per la stringa fornita, viene restituito null.

Esempio di sintassi -> document.querySelector ("# side_note") o document.querySelector (". Header_link")

A differenza di tutti i nostri esempi precedenti, questo selettore richiede a. (punto) per indicare la classe o un # (ottotorp) per indicare un ID e funziona con tutti i selettori CSS.

document.querySelectorAll ()

Questo selettore restituisce multipli che corrispondono alla stringa passata e li dispone in un altro array come la struttura nota come elenco di nodi.

Come per alcuni degli esempi precedenti, l'elenco dei nodi non può utilizzare metodi di array nativi come .forEach (). Pertanto, se si desidera utilizzarli, è innanzitutto necessario convertire l'elenco dei nodi in un array. Se non si desidera convertire, è comunque possibile scorrere l'elenco dei nodi con un'istruzione for ... in.

La stringa passata deve corrispondere a un selettore CSS valido: ID, nomi di classe, tipi, attributi, valori di attributi, ecc.

Esempio di sintassi -> document.querySelectorAll (". Footer_links")

Avvolgendo

Scegliendo il selettore giusto per le tue esigenze di programmazione, eviterai molte delle insidie ​​in cui sono caduto. Può essere incredibilmente frustrante quando il tuo codice non funziona, ma assicurandoti che il tuo selettore soddisfi le tue esigenze situazionali, non avrai problemi a "scavare con la tua pala" :)

Grazie per aver letto questo post. Se ti è piaciuto, considera di donare alcuni applausi per aiutare anche altri a trovarlo. Pubblico (gestendo attivamente il mio programma per scrivere di più) contenuti correlati sul mio blog. Sono anche attivo su Twitter e sono sempre felice di connettermi con altri sviluppatori!