Il Document Object Model (DOM) è un modello ad oggetti che compongono la struttura e il contenuto di un documento sul web.

In questo articolo introdurremo brevemente il DOM e come esso viene utilizzato. Vedremo come il DOM rappresenti un documento HTML o XML in memoria e come utilizzi le API (Application Programming Interface) per creare contenuti web e applicazioni.

Cos’è il DOM?

Il Document Object Model (DOM) è un’interfaccia di programmazione per documenti HTML e XML. Il documento rappresenta la pagina da modificare in modo chiaro e universalmente leggibile, così che i si possa modificare la struttura, lo stile e il contenuto del documento in maniera semplice. È inoltre la base per una vasta gamma di interfacce di programmazione delle applicazioni.

Una pagina Web è un documento. Questo documento può essere visualizzato nella finestra del browser o in HTML. Ma è lo stesso documento in entrambi i casi. Il Document Object Model (DOM) rappresenta quel documento in modo che possa essere modificato.

Il DOM, sostanzialmente, è un modo per accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile dei documenti, che può essere modificata con un linguaggio di scripting come JavaScript.

Nella maggior parte dei browser moderni, sono implementati gli standard W3C DOM e WHATWG DOM. Alcuni altri invece, sono incompatibili pertanto è necessario sempre controllarne la conformità.

Tutte le proprietà, i metodi e gli eventi disponibili per la modifica e la creazione di pagine Web sono organizzati in oggetti. Ciò significa che il DOM propone una struttura a forma di albero per permettere ai tecnici informatici di organizzare il lavoro di programmazione nel modo più pulito e preciso possibile.

Il DOM moderno è costruito utilizzando più API che lavorano insieme.

Il DOM principale definisce gli oggetti che descrivono fondamentalmente un documento e gli oggetti al suo interno. Esso viene ampliato secondo necessità da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l’API HTML DOM aggiunge il supporto per la rappresentazione di documenti HTML al DOM principale.

DOM e JavaScript

La maggior parte delle applicazioni del DOM è destinato a documenti scritti in JavaScript. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non avrebbe alcun modello o principio di pagine web, documenti HTML, documenti XML e loro componenti da cui attingere informazioni.

Ogni elemento in un documento – il documento nel suo insieme, l’intestazione, le tabelle all’interno del documento, le intestazioni delle tabelle, il testo all’interno delle celle della tabella – fa parte della struttura di oggetti di quel preciso documento, che è quindi possibile modificare utilizzando il DOM.

All’inizio, JavaScript e DOM erano strettamente dipendenti l’uno dall’altro, ma alla fine si sono evoluti in entità separate. Il contenuto di una pagina web è memorizzato nel DOM e può essere consultato e manipolato tramite il linguaggio JavaScript, che possiamo riassumere in questa equazione approssimativa:

API = DOM + JavaScript

Sebbene ci concentriamo esclusivamente su JavaScript, in questo articolo, le implementazioni del DOM possono essere adattate a qualsiasi linguaggio, come dimostra questo esempio di Python:

# Python DOM example
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")

Accesso al DOM

Non servono procedure particolari per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni differenti del DOM e queste implementazioni mostrano diversi gradi di conformità allo standard effettivo, ma ogni browser web utilizza un modello diverso per rendere le pagine web accessibili tramite JavaScript.

Quando crei uno script, che sia in linea in un elemento <script> o incluso nella pagina web per mezzo di un’istruzione di caricamento dello script stesso, puoi immediatamente iniziare a utilizzare le API per il documento, oppure gli elementi della finestra per modificare il documento stesso, o ancora accedere ai suoi vari elementi nella pagina web. E così via.

Sapere cos’è il DOM è molto utile nello sviluppo di applicazioni web. Conoscere com’è strutturato l’albero degli elementi di una pagina HTML, come accedere ad essi e come manipolarli, significa capire bene quello che si fa e come lo si fa.