Il DOM (Document Object Model) è, tra gli standard
del W3C, uno dei meno esplorati, una sorta di oggetto misterioso di cui non
sono ancora state sfruttate tutte le potenzialità. Il numero di risorse
valide, articoli o siti ad esso dedicati, è di gran lunga inferiore rispetto
a quello destinato ai CSS o alla famiglia XML, per citare solo due casi. Per
chi volesse farsi un'idea più completa, il rimando è alle pagine
del W3C o alla guida Dom di HTML.it. Qui ci limiteremo a ricordare che il DOM rappresenta
un insieme di API (Application Programming Interfaces) che consentono la manipolazione
degli elementi di un documento (X)HTML tramite i più svariati linguaggi
di scripting e programmazione. Nelle parole del W3C, il DOM "consente
a programmi e script di accedere e modificare dinamicamente il contenuto, la
struttura e lo stile di un documento".
In questo articolo mostreremo una semplice applicazione delle tecniche legate
al DOM. L'obiettivo è verificare sul campo la sua capacità di
modifica del documento. L'oggetto dell'esperimento saranno i link, di cui proveremo
a migliorare alcuni aspetti relativi all'usabilità.
Quali? In un articolo apparso su Usabile.it, Maurizio Boscarol ha esposto una
serie di linee guida per migliorare la qualità dei collegamenti ipertestuali.
La frase che sintetizza il tutto è la seguente: "Riassumiamo brevemente
i requisiti principali dei link: sono soprattutto legati alla loro riconoscibilità
e alla loro capacità di far anticipare all'utente in maniera corretta
dove porteranno". Se il link si apre in una nuova finestra,
se porta ad un sito in lingua inglese, se è esterno, se punta a documenti
come archivi zippati o PDF, è il caso di segnalarlo al nostro visitatore.
Un metodo suggerito è quello di usare l'attributo title
e sfruttarne la capacità di essere visualizzato in un tooltip al passaggio
del mouse. Un altro sistema consiste nel fornire contesto al collegamento utilizzando
testi o immagini che lo accompagnino. Purtroppo, abitudini inveterate o la semplice
pigrizia sono ostacoli verso questa meta auspicabile. Negli esempi che vi presentiamo
sfrutteremo DOM e Javascript per implementare questa soluzione (gli esempi sono
puramente indicativi del metodo e non intendono fornire alcuna soluzione a complessi
problemi di usabilità).
L'ispirazione per l'articolo e per lo script utilizzato viene da un esperimento
attuato da Simon Willison per la gestione delle citazioni con
l'elemento blockquote.
Esempio 1 - Link esterni e interni
Con il primo esperimento
distinguiamo con un piccola icona i link interni e quelli esterni. In pratica:
usiamo due immagini diverse a seconda che il collegamento porti ad una pagina
del nostro sito o meno. Nel documento abbiamo impostato tre link: due a pagine
di HTML.it e uno al W3C. Analizziamo i punti salienti dello script.
function modificaLink() {
var sito = /html.it/;
Definiamo innanzitutto la funzione modificaLink.
Subito dopo utilizziamo una regular expression che ci servirà a verificare
la presenza del dominio html.it all'interno dell'URL (se volete
utilizzare lo script dovrete sostituire ad html.it il domino del vostro sito,
senza www).
var links = document.getElementsByTagName('a');
for (i = 0; i < links.length; i++) {
var link = links[i];
In questo blocco iniziamo a usare i metodi del DOM. Per prima cosa andiamo
a rintracciare tutti i link (elemento a)
presenti nella pagina grazie a document.getElementsByTagName.
Eseguiamo quindi un loop su tali elementi e inizializziamo un array (link)
contenente la collezione di tutti i collegamenti ipertestuali.
url = links[i].getAttribute('href');
if (url.match(sito)) {
Per verificare se il link è esterno o interno dobbiamo confrontare l'URL
presente nell'attributo href con la
variabile definita nella regular expression. Prima (url
= links[i].getAttribute('href'); ) andiamo a rintracciare i valori
di tutti gli href, poi verifchiamo
che nell'URL sia presente html.it.
icona = document.createElement('img');
icona.setAttribute('src', 'interno.gif');
icona.setAttribute('alt', 'Link interno');
link.appendChild(icona);
}
Qui il DOM dà il suo meglio. Se nell'URL è presente html.it,
creiamo prima un nuovo elemento img;
impostiamo quindi gli attributi src
e alt; infine, (con il metodo appendChild)
inseriamo l'immagine 'interno.gif' come elemento figlio di
a.
Nella seconda parte dello script, ci limitiamo a impostare l'immagine per i
siti esterni, ovvero quelli che non contengono html.it in href.
I metodi usati sono identici, cambia solo l'immagine:
else {
icona = document.createElement('img');
icona.setAttribute('src', 'esterno.gif');
icona.setAttribute('alt', 'Link esterno');
link.appendChild(icona);
}
}
}
Per finire, facciamo sì che la funzione venga eseguito al caricamento
della pagina:
window.onload = modificaLink;
Dal momento che l'icona apparirà esattamente al fianco del link, siamo
intervenuti con una piccola regola CSS per impostare un margine sinistro di
5px. Allo stesso tempo abbiamo eliminato il fastidioso bordo tipico delle immagini
usate come link:
a img { margin-left: 5px; border: none;}
Riassumendo, abbiamo utilizzato nello script i seguenti metodi
del DOM:
| Metodo | Descrizione |
|---|---|
| getElementsByTagName(tag) | Rintraccia e restituisce elementi di un documento in base al tag. |
| getAttribute(nomeAttributo) | Rintraccia e restituisce il valore degli attributi di un elemento in base al nome dell'attributo. |
| createElement(nomeElemento) | Crea un nuovo elemento. |
| setAttribute(nomeAttributo, valore) |
Inserisce un nuovo attributo per un dterminato elemento e ne imposta il valore |
| appendChild(nuovoNodoFiglio) | Inserisce un oggetto come figlio del nodo dichiarato nell'espressione. |
Una volta chiarito il funzionamento dello script possiamo sbizzarrirci.
Esempio 2 - Usare una classe CSS per modificare i link
Nel secondo esempio abbiamo optato per una soluzione alternativa. Invece di
inserire un'immagine come nuovo elemento nel corpo del documento, si può
fare affidamento sui CSS per modificare l'aspetto dei link a seconda che siano
esterni o interni.
Per prima cosa abbiamo impostato due classi da applicare ai collegamenti: in
una l'immagine di sfondo è 'interno.gif', nell'altra 'esterno.gif'. Lo
script valuta la presenza di html.it nell'url e assegna di conseguenza ai link
la classe .esterno o quella
.interno. In questo caso si perdono le informazioni presenti in precedenza
nell'attributo alt. Motivo in più
per usare il title sul link.
Esempio 3 - Usare un testo informativo
L'esempio 3 è praticamente identico al primo, salvo il fatto che al
posto di un'icona utilizziamo un semplice avviso testuale. Nello script va notato
il metodo document.createTextNode,
deputato per l'appunto alla creazione di nuovi nodi testuali all'interno del
documento.
Esempio 4 - Un'icona per i tipi di file non html
Nel quarto esempio applichiamo lo script ad un'altra eventualità. Se
il link punta ad un file non html è bene avvertire l'utente. Useremo
quindi un'icona per segnalare il tipo di file che si sta per scaricare o visualizzare.
L'impostazione dello script è pressocché identica alle precedenti.
Ovviamente non abbiamo qui bisogno di regular expression. Con l'istruzione (url.substring(url.length-3,
url.length)=='zip') verifichiamo semplicemente se le ultime 3 lettere
dell'URL corrispondano ad una determinata estensione di file e se ciò
è vero visualizziamo l'immagine adatta. Lo script così concepito
è applicabile, ovviamente, a URL regolari che terminino con l'estensione
del file.
Esempio 5 - Applicare lo script solo ad alcuni link
In tutti gli esperimenti visti finora, lo script viene applicato a tutti i
link presenti in una pagina. Ciò può essere talvolta non desiderato.
Magari vogliamo che la funzionalità sia presente nella sezione principale
ma non in un menu. La soluzione è a portata di mano. Nel quinto esempio
abbiamo ripreso il primo, apportando una piccola modifica. Le liste di link
sono due, la prima all'interno del div
"menu", la seconda all'interno del div
"sezione". Vogliamo applicare lo script solo a questi ultimi. Basterà
filtrare all'origine l'applicazione dei metodi DOM:
var sezione = document.getElementById('sezione');
var links = sezione.getElementsByTagName('a');
Con la variabile sezione ci riferiamo al div che porta lo stesso nome. Esso
viene definito con uno dei cardini della programmazone sul DOM, document.getElementById,
metodo che consente di rintracciare e restituire un elemento in base al suo
id. Subito dopo rintracciamo solo i link presenti al suo interno e non in tutto
il documento, come si faceva prima con document.getElementsByTagName('a').
Conclusioni
Come si può intuire da questi semplicissimi esperimenti, il DOM è
uno strumento potente ed efficace. In quanto tale va usato con cautela, tenendo
sempre conto di fattori come l'accessibilità. Inserire contenuto con
uno script è per certi versi un azzardo. L'utente di browser alternativi
o senza supporto di Javascript, non potrà fruirne. Nel nostro caso, però,
l'uso delle icone o del testo accessorio è un plus che offriamo a chi
ci visita con i browser tradizionali. L'uso eventuale di queste funzionalità
non ci deve portare a fare a meno di utilità come l'attributo title.
Anzi, usare quest'ultimo in maniera appropriata, può consentirci di operare
meglio anche con lo script. Basterà accedere all'attributo e lavorare
su di esso come si è fatto con href.
