L’in­ven­zio­ne di Ja­va­Script a metà degli anni Novanta ha si­gni­fi­ca­to una grande svolta per il World Wide Web. I siti web esclu­si­va­men­te statici di una volta si sono evoluti, grazie a elementi cor­ri­spon­den­ti nel famoso lin­guag­gio di scripting, in progetti web sempre più dinamici. I pro­dut­to­ri di browser hanno risposto im­ple­men­tan­do in­ter­pre­ti adatti e pro­get­tan­do i propri modelli per l’HTML dinamico (DHTML). Con questi in­ter­pre­ti e modelli che hanno reso possibili ampie modifiche strut­tu­ra­li e visive del documento web durante la vi­sua­liz­za­zio­ne nel browser, sono state sfruttate tutte le po­ten­zia­li­tà di Ja­va­Script.

Tuttavia, poiché le diverse tecniche non erano affatto coor­di­na­te, hanno implicato un notevole sforzo per gli svi­lup­pa­to­ri web che volevano offrire il loro progetto dinamico per tutti i browser. Per questo motivo, nel 1998 il consorzio W3C ha pub­bli­ca­to la prima specifica del Document Object Model (DOM), che come in­ter­fac­cia uni­ver­sa­le svolge ancora oggi un ruolo centrale nella pro­gram­ma­zio­ne Ja­va­Script.

Che cos’è il Document Object Model (DOM)?

Il Document Object Model (DOM) è un’in­ter­fac­cia di pro­gram­ma­zio­ne stan­dar­diz­za­ta per la strut­tu­ra­zio­ne di documenti HTML e XML. È stato svi­lup­pa­to e pub­bli­ca­to dal World Wide Web Con­sor­tium (W3C), l’or­ga­niz­za­zio­ne fondata nel 1994 dall’inventore del web Tim Berners-Lee per la pro­get­ta­zio­ne e la de­fi­ni­zio­ne di standard per il World Wide Web.

Lo scopo del Document Object Model è rendere il più facile possibile ai pro­gram­ma­to­ri l’accesso ai com­po­nen­ti di un progetto web e quindi ag­giun­ge­re, can­cel­la­re o mo­di­fi­ca­re contenuti, attributi e stili. Il DOM funge da col­le­ga­men­to tra linguaggi di scripting come Ja­va­Script e il documento web sot­to­stan­te, in­di­pen­den­te­men­te dalla piat­ta­for­ma e dal lin­guag­gio, rap­pre­sen­tan­do la struttura del documento in una struttura ad albero in cui ogni nodo è un oggetto in­di­pen­den­te e gestibile. Per il tipo di struttura che viene a de­li­near­si, la versione di un progetto web così rap­pre­sen­ta­ta viene anche chiamata DOM-Tree (in italiano “albero DOM”).

N.B.

Di­ver­sa­men­te da quanto potrebbe suggerire il nome, DOM non è in realtà un modello ma, come già detto, un’in­ter­fac­cia di pro­gram­ma­zio­ne. Tuttavia, un Document Object Model può essere visto in senso figurato come un modello per la modalità di accesso ai dati web rap­pre­sen­ta­ti come oggetto.

Dove e quando vengono uti­liz­za­ti gli alberi DOM?

Il Document Object Model è stato svi­lup­pa­to per il World Wide Web e viene uti­liz­za­to prin­ci­pal­men­te in questo ambito. Più pre­ci­sa­men­te, sono i browser con cui gli utenti accedono alle offerte del web che si avvalgono dell’in­ter­fac­cia stan­dar­diz­za­ta: ad esempio, i comuni web client uti­liz­za­no DOM o in­ter­fac­ce basate su DOM per vi­sua­liz­za­re pagine HTML o XML da con­sul­ta­re. In questo processo, i singoli com­po­nen­ti sono rag­grup­pa­ti in nodi e or­ga­niz­za­ti in un singolo albero DOM. Allo stesso tempo, il ri­spet­ti­vo browser carica questa versione mostrata del documento web nella memoria locale per ana­liz­zar­la o ela­bo­rar­la e infine pre­sen­ta­re la pagina nella forma voluta dallo svi­lup­pa­to­re. Per la vi­sua­liz­za­zio­ne, i browser si basano su vari motori (rendering software), come Gecko (Firefox), WebKit (Safari) o Blink (Chrome, Edge, Opera), anch’essi basati sullo standard DOM.

z0HN-fG6oT4.jpg Per visualizzare questo video, sono necessari i cookie di terze parti. Puoi accedere e modificare le impostazioni dei cookie qui.

In qualità di pre­sen­ta­zio­ne orientata agli oggetti di un documento web, il Document Object Model rimane rilevante anche dopo l’output, come in­ter­fac­cia per tutti i contenuti dinamici pro­gram­ma­ti e quindi per tutte le in­te­ra­zio­ni dell’utente che possono cambiare l’aspetto della pagina durante l’output.

N.B.

Il consorzio W3C ha in­tro­dot­to nel 2012, tra i quattro pilastri dei co­sid­det­ti com­po­nen­ti web, un’in­ter­fac­cia speciale chiamata Shadow DOM. Questa permette di estendere a proprio pia­ci­men­to il Document Object Model di un documento web con sot­toal­be­ri in­di­pen­den­ti (shadow trees). Trovate maggiori in­for­ma­zio­ni sull’argomento shadow DOM nell’articolo collegato.

Com’è strut­tu­ra­to il Document Object Model?

I markup HTML de­fi­ni­sco­no le relazioni tra i vari tag che con­ten­go­no. Ad esempio, gli elementi taggati di un documento web sono collegati tra loro a seconda del ruolo che ricoprono nel progetto. Inoltre, alcuni tag possono essere contenuti in altri tag. Per ri­flet­te­re ade­gua­ta­men­te queste gerarchie nel Document Object Model, l’in­ter­fac­cia utilizza la struttura ad albero sopra men­zio­na­ta, che permette di disporre nel modo cor­ri­spon­den­te gli oggetti vi­sua­liz­za­ti.

La struttura di un albero DOM dipende quindi sempre dal documento HTML o XML sot­to­stan­te. Nel primo caso, tuttavia, si può definire la seguente gerarchia di base valida per più progetti:

Immagine: Gerarchia di base DOM per documenti HTML
Gli oggetti di un Document Object Model minimale ri­flet­to­no la struttura HTML di base.

Come nella struttura HTML di base, l’oggetto HTML stesso è in cima alla gerarchia. L’in­te­sta­zio­ne (header) e il corpo (body) del sito web sono su­bor­di­na­ti ad esso. Si presume, inoltre, che il body contenga almeno un paragrafo (sezione con contenuto testuale).

N.B.

Le singole divisioni dell’albero DOM sono chiamate nodes o nodi. Questi si di­stin­guo­no in nodi di elementi (come body, header e paragraph nel documento HTML rap­pre­sen­ta­to sopra), nodi di attributi come “align” o “size” e nodi di testo.

Document Object Model: esempio pratico (con codice HTML)

Dopo aver esaminato in dettaglio la funzione e la struttura generale del Document Object Model nei paragrafi pre­ce­den­ti, un esempio concreto può chiarire la tecnica di strut­tu­ra­zio­ne fon­da­men­ta­le per linguaggi di scripting web. Prendiamo in con­si­de­ra­zio­ne un semplice documento HTML con header (compreso il col­le­ga­men­to con il foglio di stile CSS), body e due elementi Content (immagine e testo):

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <p><strong>Hello world!</strong></p>
        <div><img src="immagine.jpg"></div>
    </body>
</html>

L’albero DOM generato da questo codice HTML ha il seguente aspetto:

Immagine: Rappresentazione grafica di un albero DOM
L’elemento HTML occupa il primo posto nella gerarchia di un documento web.

In al­ter­na­ti­va, questo esempio di Document Object Model può essere pre­sen­ta­to nella forma seguente:

DOCTYPE: HTML
HTML
----head
-  ---- meta
-  ---- link
-  ---- title
----body
-  ---- p
-    ---- strong
-      ---- TEXT: Hello world!
-  ---- div
-    ---- img
Vai al menu prin­ci­pa­le