The Idles: DHTML e DOM

Il DHTML (Dynamic HTML) è un insieme di tecnologie che lavorano insieme per generare un'interfaccia interattiva: esso utilizza normali elementi HTML per creare una pagina Web che si basa sui fogli di stile per la formattazione degli elementi e sullo scripting per modificare dinamicamente il contenuto HTML, lo stile o la posizione, senza dover caricare nuovamente la pagina dal server.
Per funzionare, DHTML richiede che i browser Web supportino le seguenti tecnologie:

HTML
CSS
Scripting (Javascript)

DHTML si basa sul DOM (Document Object Model), per identificare, creare e manipolare, attraverso degli script, gli elementi in una pagina Web, e sulla gestione degli eventi per tenere traccia delle azioni del browser Web e dell'utente.
Il DOM è il modello a oggetti del documento, cioè un modello che descrive come i diversi oggetti di una pagina sono collegati tra loro. Dalla definizione presa su HTML.it, il DOM è un'API (Interfaccia per la programmazione di applicazioni), indipendente dalla piattaforma (quindi anche dal tipo di browser), che descrive la struttura di un documento HTML (e XML), con il quale i costruttori di pagine Web possono accedere e manipolare tutti gli elementi della pagina stessa.
Attraverso il DOM, una pagina Web assume una struttura gerarchica costituita da nodi, i quali possono avere attributi e proprietà.
Per esempio:

<html>
<head>
<title>Titolo Pagina</title>
<head>
<body>
<p>Testo del paragrafo</p>
</body>
</html>

In una pagina Web il "document" è l'elemento più importante, perchè contiene tutti gli altri elementi del DOM; esso non rappresenta un particolare tag html, ma bensì tutto il codice presente nella pagina ed è quindi il root, la radice, dell'albero gerarchico.
Essendo il "document" un oggetto, si può dire che possiede dei metodi:

quelli che si occupano di recuperare gli elementi nella pagina;
quelli che permettono di creare nuovi elementi.

Nel primo caso si hanno i seguenti metodi:

getElementById(id_name) = permette di recuperare un elemento mediante il nome del suo identificativo;
getElementByTagName(tag_name) = permette di recuperare l'insieme degli elementi caratterizzati dallo stesso tag e ritorna un array contenente tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel codice.

Nel secondo caso si hanno i seguenti metodi:

createElement(tag_name) = permette di creare un qualsiasi tipo di elemento;
createTextNode(text) = permette di creare un nodo di testo, che non può contenere altri nodi, né avere attributi.

Marco Ruberto