Capita spesso di lavorare con HTML, JavaScript e CSS lasciando il DOM come scheletro nell'armadio. Se chiediamo chiarimenti ad un esperto, le risposte vanno dal “non ti serve conoscerlo” al “è facilissimo, ora ti spiego”, ma dopo la spiegazione siamo più confusi di prima. Eppure, se qualcuno ha deciso di introdurre un concetto a metà tra l'etereo e il ridondante, un motivo dovrà pur esserci: oggi tenteremo di spiegare cos'è il DOM in parole semplici, mostrando esempi concreti e qualche pezzo di codice.
Cos'è il DOM?
La prima cosa da chiarire è che il DOM non è l'HTML, né una versione “strutturata” dell'HTML.
Il DOM, come dice la parola stessa (Document Object Model) è un modello, ovvero un modo di rappresentare un documento. Facciamo un esempio consideriamo un'enciclopedia. Da qualche parte avremo delle pagine che permettono di cercare la voce che ci interessa. Potremmo avere un indice analitico, che contiene le varie voci in ordine alfabetico, oppure un indice tematico, suddiviso in argomenti, ad esempio geografia, medicina, storia ecc., con i relativi sottoargomenti. Potrebbero esistere molti modi di organizzare un indice o una tavola dei contenuti, e altrettanti modi di accedere alla voci dell'enciclopedia, ma il contenuto dell'enciclopedia rimarrà sempre e comunque una cosa a parte, e non sarà mai una parte dell'indice (né viceversa).
Se pensiamo al contenuto HTML di una pagina web come al contenuto dell'enciclopedia, allora il DOM è solamente uno degli indici possibili, cioè uno dei tanti modi di accedere ai contenuti della pagina. In termini più tecnici: il DOM è un'interfaccia, o meglio una API (Application Programming Interface) ideata dal consorzio W3C, che permette di accedere agli elementi di una pagina.
Differenze tra DOM e HTML
Per chiarirci le idee vediamo subito un esempio pratico. Consideriamo il codice HTML
<html>
<body>
<div id=”immagini”><img src=”fotografia.jpg”></div>
</body>
</html>
se guardiamo all'HTML dal punto di vista strutturale, diremo che la tag img è figlia della tag div, che a sua volta è figlia della tag body e così via. In altre parole la catena di relazioni “padre-figlio” che individuano la tag img è
html > body > div > img
Se però vogliamo accedere al contenuto della tag img usando il DOM, potremo scrivere
<script language="javascript" type="text/javascript">
alert(document.images[0].src) ;
</script>
che ci mostrerà un messaggio del tipo fotografia.jpg. La cosa importante da osservare è che tramite il DOM abbiamo avuto accesso alla tag img direttamente, senza attraversare la catena gerarchica delle sequenza padre-figlio. Infatti abbiamo scritto
document.images[0]
e non qualcosa del tipo
document.body.divisions[0].images[0]
Dovrebbe essere finalmente chiaro perché il DOM non è un modo alternativo di scrivere l'HTML, ma è semplicemente un modo (un “indice” enciclopedico) che ci permette di trovare senza troppa fatica gli elementi che stiamo cercando all'interno della pagina. Non importa quanto sia annidata la nostra tag img, non importa quante immagini contenga una pagina HTML. In ogni caso il comando document.images[0] ci restituirà sempre e comunque la prima immagine del documento.
Approfondimenti
Una volta chiarito cos'è il DOM e a cosa serve, dovremmo essere in grado di muoverci più agevolmente all'interno del documento. Ad esempio, se vogliamo stampare la lista di tutte le immagini presenti nel codice HTML basterà scrivere
for (i = 0; i < document.images.length; i++) {
document.write(document.images[i].src + "<br/>");
}
A questo punto è solo questione di buona volontà. Le API dell'oggetto document sono forse le più documentate sul web, vale la pena dargli un'occhiata e fare qualche esperimento. Prima di concludere, sottolineiamo alcune concetti chiave del DOM
- Il DOM non è JavaScript. Vale semmai il contrario: JavaScript è un linguaggio che permette accesso al DOM, ad esempio mediante i comandi che abbiamo visto sopra
- Il DOM è dinamico. E' possibile cambiare o aggiungere elementi al DOM, modificando la pagina dopo averla visualizzata nel browser
Un ottimo punto di partenza, per chi approccia l'argomento la prima volta, è quello di provare con mano gli esempi pratici pubblicati dal W3C.
Non facciamoci spaventare dal grande numero di esempi. Si tratta di esercizi molto semplici, che possiamo sbirciare dedicando una manciata di secondi ad ogni esempio. E'un approccio pratico che vale la pena sperimentare prima di tuffarsi negli approfondimenti teorici.
