Corsi on-line

HTML DOM spiegato alle pietre

Spesso nello studio di HTML e JavaScript si sente parlare di DOM (Document Object Model) e HTML DOM senza capire pienamente il significato di questi due termini; cominciamo subito con il sottolineare che non si tratta esattamente di sinonimi, se da una parte infatti il DOM definisce uno standard per l’accesso ai documenti, l’HTML DOM è più precisamente un modello per questo tipo specifico di documenti, esiste infatti anche un DOM per l’XML e un Core DOM generale per tutti i documenti.

dom1Nelle intenzioni del W3C (World Wide Web Consortium), il consorzio che si occupa della definizione delle specifiche per gli standard Internet, DOM sarebbe dovuta essere un’interfaccia neutrale, e quindi indipendente, rispetto a qualsiasi linguaggio di sviluppo o piattaforma di riferimento; il risultato degli sforzi effettuati è stata una soluzione che consente alle applicazioni di accedere dinamicamente al contenuto, alla struttura e allo stile di un documento con la possibilità di apportare modifiche ad esso.

Venendo al caso dell’HTML DOM, esso rappresenta un modello in cui tutti gli elementi HTML vengono definiti come degli oggetti, nel contempo vengono definite anche tutte le proprietà degli elementi HTML, i metodi di accesso a questi ultimi e gli eventi correlati ad essi; sulla base di questo object model standard si potranno effettuare procedure finalizzate alla selezione, alla modifica, all’inserimento e alla cancellazione degli elementi HTML.

Volendo rappresentare graficamente l’HTML, è possibile ipotizzare una disposizione gerarchica degli elementi a capo della quale vi è il documento; l’elemento di root (quindi la radice del documento) sarà il tag HTML seguito da due diramazioni, head e body. head farà capo ad uno o più metatag (ad esempio title) che a loro volta presenteranno un elemento gerarchicamente inferiore, il contenuto; body invece fa capo ad ulteriori elementi (ad esempio il tag a per i link) che sono gerarchicamente paritari con gli attributi (href nel caso di a) ma superiori, anche in questo caso, al contenuto.

Cosa è possibile fare con DOM e in particolare con l’HTML DOM? Nel caso di uno strumento con JavaScript potremmo per esempio apportare modifiche a un qualsiasi elemento HTML di pagina o relativo attributo, intervenire sugli stili CSS, rimuovere un qualunque elemento HTML o attributo, aggiungere elemento HTML o attributi, definire comportamenti in reazione agli eventi o generare nuovi eventi.

A livello pratico un semplice esempio di quanto detto in precedenza potrebbe essere il seguente:

<!DOCTYPE html>
<html>
<body>
<h1>Manipolazione dell'HTML DOM</h1>
<script>
document.getElementById("prova").innerHTML = "Fatto!";
</script>
</body>
</html>

Eseguendo il codice proposto la proprietà innerHTML riempirà dinamicamente di contenuto il paragrafo associato all’identificatore (“id“) prova, ciò avverrà grazie al metodo getElementById che permette appunto di accedere ad un elemento di pagina sulla base di un identificatore. In linea generale è quindi possibile sostenere che una proprietà è un valore definibile (ad esempio un contenuto delimitato da tag HTML), mentre un metodo sarà l’azione operata a carico di un elemento HTML.

Per approfondire

Post correlati
I più letti del mese
Tematiche