Experimentalia

Appunti raminghi

Mootools: Selezionare un elemento

leave a comment »

Tra i compiti più comuni che un programmatore javascript si trova ad assolvere c’è sicuramente la selezione di uno o più elementi all’interno del DOM.

Javascript propone diversi metodi: getElementById e getElementByTagName sono i più conosciuti e supportati. Mootools estende queste funzionalità fornendo dei propri metodi “wrapper” che permettono di operare selezioni più complesse con semplicità. Non mi stancherò mai di ripetere, inoltre, che i framework come Mootools hanno il metodo fondamentale di uniformare il supporto a javascript dei diversi browser (nei limiti del possibile). Ad esempio, nel caso della selezione permettendo di utilizzare una funzionalità simile a getElementByClassName anche per quei browser che non ne sono provvisti.

Darò per scontato che sappiate cosa siano xpath ed i suoi assi di selezione; chi non sapesse di cosa sto parlando può colmare la propria lacuna facilmente e rapidamente utilizzando, per esempio, la pagina della w3c school che parla degli assi.

document.id (o $)

Nelle prime versioni di mootools si usava il simbolo $ per selezionare un elemento tramite il suo id. Dalla versione 1.2.3 il nome della funzione
è stato cambiato in document.id per evitare conflitti con altre librerie javascript. In caso il simbolo non sia già stato utilizzato allora, per
compatibilità, viene utilizzato come alias.

Ho scritto che questa funzione permette di selezionare un elemento dal DOM tramite il suo id. Ho semplificato ed è bene mettere subito in
chiaro che in realtà non si tratta di un semplice alias di getElementById().

In realtà questa funzione decora un oggetto javascript con i metodi propri degli oggetti mootools. Accetta in input un parametro che può essere un oggetto tradizionale o uno potenziato da mootools (mootools augmented?) o anche una stringa che rappresenta l’id di un elemento presente nel DOM.

In caso venga passato un oggetto mootools questo viene restituito tal quale; negli altri casi, l’elemento, acquisito dal DOM se necessario, viene arricchito delle proprietà e dei metodi tipici di
mootools prima di essere restituito al chiamante.

$$

La funzione $$, dollars se cercate tra le pagine della documentazione di mootools, restituisce una collezione di oggetti che rispettano i criteri
di selezione passati come parametro.

Nativamente la funzione prende in input un tag e restituisce un array contenente tutti gli elementi di corrispondenti presenti nel DOM, un po’
come getElementsByTagName. Se in mootools è stato anche incluso il modulo selector allora sarà possibile effettuare una selezione molto più mirata.

A titolo esemplificativo possiamo utilizzare criteri di ricerca come questi:

table[class=test] tr[class=odd] a[href^='http://']

che seleziona i link esterni all’elemento che si trovano sulle righe dispari di una tabella di classe test.

Metodi di selezioni associati alla classe Element

La classe element fornisce dei metodi per manipolare gli elementi del DOM. I metodi di selezione che vedremo permettono cercare nel DOM gli elementi che ci interessano limitando la ricerca al sottoalbero che ha come radice l’elemento di cui viene invocato il metodo. Li raggrupperemo, a spanne, secondo gli assi su cui vanno ad operare.

Una caratteristica comune a tutti i metodi che seguiranno è l’utilizzo del parametro che serve da filtro alla selezione.

Se ad esempio invochiamo il metodo getChildren di un elemento, che permette di selezionare tutti i nodi figli di quello su cui è invocato, possiamo limitare l’effettiva selezione ai soli nodi di tipo span passando quest’ultimo come parametro.

elementoAttivo.getChildren('span')

Se poi volessimo filtrare ancora la selezione limitandola ai soli span di classe messaggio

elementoAttivo.getChildren('spam[class=messaggio]');

Element.getElementById

Corrisponde alla document.id ma viene ristretta al sottoalbero la cui radice è l’elemento su cui viene invocata.

L’asse Descendant:

Element.getElements ed Element.getElement

Il corrispettivo della funzione $$ limitato ad un sottoalbero DOM. Non solo il formato di input ma anche quello dell’output è identico.

Per selezionare tutti i discendenti di un elemento non ho trovato di meglio che passare il parametro “*”.

Il metodo getElement si limita a restituire solamente la prima occorrenza trovata piuttosto che un array con tutta la selezione.

L’asse Children:

Element.getChildren

I figli di un elemento sono, per definizione, tutti i nodi di primo livello del sottoalbero DOM che fa capo all’elemento di cui si invoca il metodo, quelli il cui genitore proprio è l’elemento in questione. Questa funzione non fa altro che restituire un array composto proprio da questi elementi.

La selezione viene ulteriormente filtrata dal parametro opzionale. E’ possibile, ad esempio, stabilire che solo i figli che hanno un certo tag, o appartengono ad un a certa classe, soddifino i criteri di selezione e vengano restituiti.

Element.getFirst ed Element.getLast

Se ci interessa solamente il primo figlio di un elemento basta invocare il metodo getFirst, analogamente l’ultimo dei figli viene selezionato tramite getLast.

L’asse Ancestor:

Element.getParents ed Element.getParent

Simmetrico al metodo appena getChildren, getParent restituisce l’unico genitore dell’elemento a cui appartiene. Per definizione di albero, infatti, se anche un elemento può avere molteplici figli, ha sempre e solo un unico genitore.

Unica eccezione a questa regola draconiana è la radice del DOM (nel nostro caso rappresentata dal tag html) che restituisce null.

Se volessimo risalire tutta la catena degli antenati fino ad html non dovremo fare altro che utilizzare il metod getParents.

L’asse Siblings:

Element.getSiblings

Oltre ad avere genitori e figli un elemento ha anche dei fratelli, nella terminologia xpath siblings, che non sono altro che gli elementi che hanno lo stesso genitore del nodo in oggetto. Questo metodo non fa altro che restituire tutti i fratelli del nodo su cui viene invocato il metodo. Questo significa che quest’ultimo non verrà selezionato.

Element.getPrevious ed Element.getNext

Con questi metodi si sposta la selezione di un elemento a destra (getNext) o a sinistra (getPrevious) dell’elemento attivo. In altre parole le funzioni restituiscono, se presente, l’elemento subito precedente, o successivo, a quello su cui viene invocato il metodo.

Element.getAllPrevious ed Element.getAllNext

Questo metodo estende la selezione dei metodi appena descritti a tutti i fratelli del nodo di cui viene invocato il metodo restituendo, rispettivamente, tutti gli elementi precedenti e successivi al nodo in questione.

Conclusioni

Non ho scritto nulla riguardo  gli assi composti, ad esempio tutti quelli -or-self (es. ancestor-or-self), following e preceding, oltre che self e namespace perché non esistono in mootools metodi che ne implementino la selezione.

Alcuni di questi, self, perché ridondanti, altri, namespace, perché in un contesto (x)html non hanno  senso (correggetemi se sbaglio); altri ancora perché facilmente ricostruibili (ancestor-or-self, descendant-or self). Possiamo considerare il replicarli un utile esercizio.

Parlando di esercizi ed esempi non mi resta che lasciarvi il link jfiddle dove ho reso disponibile un esempio (scarno, lo ammetto) che illustra  l’utilizzo di queste funzioni.

Written by Eineki

gennaio 12, 2011 a 8:04 am

Pubblicato su javascript, mootools

Tagged with , , ,

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: