Il DOM HTML e Javascript

DOM è l’acronimo di Document Object Model, letteralmente Modello ad Oggetti del Documento, ed è lo standard ufficiale del W3C (vedi sotto) con cui i documenti HTML, XHTML e XML vengono rappresentati. Con questo standard un documento viene rappresentato secondo una struttura gerarchica ad albero, all’interno della quale ciascun nodo è un oggetto che rappresenta una parte del documento stesso (vedi figura sotto).

Il W3C (World Wide Web Consortium) è il consorzio che definisce gli standard ufficiali del Web. Per chi vuol approfondire che cos’è il W3C si rimanda al suo sito ufficiale: link.

Il modello del documento definito dal DOM fornisce un’interfaccia indipendente dalla piattaforma e dal linguaggio utilizzati, che permette ai programmi e agli script di avere accesso al documento per aggiornarne dinamicamente il contenuto, la struttura e lo stile, secondo un modello orientato agli oggetti. In particolare, nel caso delle pagine HTML, sfruttando l’interfaccia offerta dal DOM, tutte quelle cose possono essere realizzate per esempio utilizzando i fogli di stile CSS e gli script Javascript. Il costrutto “HTML dinamico”, infatti, viene utilizzato proprio per indicare la combinazione di HTML, fogli di stile CSS e script Javascript, che permette ai documenti di essere “animati”. Si fa notare che i tre linguaggi menzionati, sono anch’essi degli standard del W3C.

Il W3C DOM si compone di tre diverse parti:

  1. Core DOM: lo standard per tutti i tipi di documenti.
  2. XML DOM: lo standard per i documenti XML.
  3. HTML DOM: lo standard per le pagine HTML.

HTML DOM e Javascript

Quando una pagina web viene caricata in un browser, esso crea il DOM della pagina che consiste in una struttura gerarchica ad albero di oggetti, come quella della figura di esempio seguente.

HTML_DOM

Si noti come i nodi dei vari elementi della pagina si dispongono nella gerarchia del DOM rispettando i diversi livelli di annidamento che i tag html corrispondenti hanno nella pagina. Tra i nodi riportati nella figura, inoltre, ce ne sono alcuni che non corrispondono ad alcun tag HTML, gli elementi testo e attributo, e sono atipici in quanto non possono includere altri elementi o altri attributi (foglie dell’albero).

Nel DOM tutti gli elementi HTML sono definiti come degli oggetti che attraverso i metodi e gli attributi permettono a Javascript di avere accesso alla pagina HTML per:

  • modificare i contenuti e gli attributi degli elementi HTML e gli stili CSS applicati;
  • eliminare e aggiungere elementi HTML e attributi;
  • rispondere agli eventi HTML;
  • creare nuovi eventi HTML.

Per un elenco di tutti gli attributi e i metodi degli oggetti del DOM HTML si rimanda al seguente: link.