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.
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
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
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. |
