Prototype: l’uso del doppio dollaro ($$)

Con l’ultimo rilascio di Prototype, Andrew e Christophe hanno velocizzato e migliorato la funzione ‘doppio dollaro’  ($$ utility), la quale permette di selezionare un elemento specificando il selettore (praticamente tutti i selettori supportati dalle specifiche CSS3).

L’utilità di questa funzione va ben oltre la popolare $, che può essere utile ma, in fin dei conti, non svolge nessuna operazione degna di nota. L’utility ‘doppio dollaro’ ($$) invece permette davvero di selezionare qualsiasi tipo di elemento, fornendo ottimi strumenti per filtrare gli elementi nel DOM.

Vediamo alcuni esempi ripresi dal sito ufficiale:

1
2
3
4
5
$$('div'); // -> Tutti i DIV del documento. Stessa cosa di document.getElementsByTagName('div')!
$$('#contents'); // -> Uguale a $('contents'), ma ritorna sempre un array.
$$('li.faux'); // -> Tutti fli elementi LI con class 'faux'
$$('#contents a[rel]'); // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel
$$('a[href="#"]'); // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!)

Il punto di forza, tuttavia, risiede nella possibilità di escludere alcuni elementi in favore di altri, ad esempio:

1
$$('a:not([rel~=nofollow])'); // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow"

Ancora più interessante è:

1
$$('a[href^=#]:not([href=#])')

Questo, in pratica, trova tutti i TAG A con l’attributo href che inizia con ‘#’ ma non prende in considerazione quelli che sono uguali a ‘#’ solamente. In altre parole vengono ignorati i links che non puntato ad un valido ID!
Questa eccezionale caratteristica del ($$) ha ispirato Tobie Langel per creazione di un semplicissimo script (disarmante) in grado di aggiungere un simpatico effetto di scroll quando all’interno di una stessa pagina HTML ci si sposta per Anchors, con la tecnica – appunto – href=”#”.
Per un Demo clicca qui.