Utilizzare i selettori CSS in Javascript con il dollaro-dollaro
inserito nella categorie: CSS, Javascript
marchiato con i tag: $, $$, array, css, document, dollaro, DOM, javascript, query, selector, selettori
Se vi dico getElementById o getElementsByTagName sicuramente sapete di cosa io stia parlando.
Se non sapete di cosa si tratta, potete anche uscire da questa pagina 
.
In caso contrario, sicuramente molti di voi durante lo sviluppo di uno javascript, si saranno ripetuti più di una volta.. certo che avrebbero potuto usare nomi più brevi per queste funzioni..!.
Detto, fatto!
Esiste una utilissima funzione in javascript, identificata con l’operatore $$ che permette di utilizzare i selettori CSS per recuperare elementi dal DOM.
Per avere un’idea di come essa funzioni, vi ho preparato questa tabella, che di certo vi chiarirà le idee:
getElementById('id') : $$('#id')
getElementsByClassName('class') : $$('.class')
getElementsByTagName('h1') : $$('h1')
Ovviamente si può realizzare molto, ma molto di più con il mitico $$.
Mettiamo il caso che tu voglia “prelevare” dal DOM l’elemento con tag
h1 che ha classe header, figlio dell’elemento generico con id “logo”. Semplice, e pulito:
$$("#logo h1.header")
Attenzione! La funzione $$ restituisce sempre un array di elementi, anche se avete a che fare un solo elemento!
Questo significa che una volta “prelevati” gli elementi, ed essendo sicuri che l’array non sia vuoto, effettuando magari un controllo con if (array.length) { ... }, per accedere all’elemento dovete scrivere: array[0].
Tutto chiaro?
Nota:
In alcuni browser più vecchi, o magari Internet Explorer (che schifo), la funzione $$ non è presente.. però potete inserirla voi, in questo modo:
$$ = function() { return document.querySelectorAll.apply(document, arguments) }
Ecco qui riportati altri esempi di come usare il dollaro-dollaro:
$$('body *'): restituisce tutti gli elementi figli del DOM.
$$('input[type=submit]'): rest. gli input che hanno come attributo “submit” (<input type=”submit” …
$$('a:first-child'): rest. gli elementi con tag a che sono prime figlie dell’elemento padre
$$('p:nth-child(even)'): rest. gli elementi con tag p i quali sono figli di numero pari rispetto all’element padre.
$$('body h1'): rest. gli elementi h1 figli diretti di primo livello rispetto al body.
$$('input:focus'): rest. gli elementi input che hanno il “fuoco” corrente (dovrebbe essere solo uno in questo caso).
Se avete dubbi.. i commenti son qui sotto 
Commenti (6)
jquery home-made lol
No, putroppo non posso su Mac.
L’hai per caso verificato anche con le ultime versioni di ie?
hu… senza framework?
interessante…
Si certo nello, alla fin fine jQuery con $ non fa altro che fare quello che ora fa $$, ovviamente cross-browser.
Volevo solo illustrare come con i nuovi browser fosse possibile questa soluzione senza l’utilizzo di framework esterni.
Flavio l’articolo è interessante ma a mio parere utilizzare i selettori in questo modo non è così conveniente come sembra. Innanzitutto ci sono dei controlli da fare su quello che il selettore ha considerato, in secondo luogo Internet Explorer come al solito da i suoi problemini. Non sarebbe meglio utilizzare un framework come JQuery per ovviare a questi problemi e avere a disposizione un selettore migliore del ‘$$’ (ossia ‘$’) con in aggiunta tutti gli strumenti che mette a disposizione ???
Già dalla prima volta che ho usato JQuery me ne sono innamorato… Naturalmente queste sono solo mie considerazioni!
Commenta anche tu!