Il DOM (Document Object Model) di HTML è una rappresentazione gerarchica e strutturata di un documento HTML. In altre parole, il DOM trasforma la struttura di un documento web in uno schema, così da poterla facilmente utilizzare da JavaScript.
In questa lezione, vediamo come funziona il DOM di HTML.
La struttura DOM viene creata quando la pagina HTML si è caricata completamente. Può essere immaginata come un albero genealogico. Ad esempio, prendiamo una pagina HTML come questa:
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div>
<h1>titolo</h1>
<p>testo</p>
</div>
</body>
</html>La struttura ad albero che avrebbe la pagina dell'esempio sarebbe questa:
Prendendo in considerazione l'esempio precedente, vogliamo accedere all'elemento <h1>. Per farlo (teoricamente parlando), dovremmo andare in: html > body > div > h1
Nelle prossime lezioni, vedremo come è possibile farlo utilizzando JavaScript.
Con JavaScript, è possibile lavorare con il DOM di HTML e svolgere tante diverse istruzioni: modificare tutti i tag HTML, aggiungere e rimuovere stili agli elementi, eliminare e aggiungere codice HTML, e molto altro.
Le possibilità sono veramente molte, tanto che JavaScript viene usato dalla maggior parte dei siti web nel mondo, proprio per questo scopo.
L'utilizzo del DOM con JavaScript offre numerosi vantaggi. Innanzitutto, ci consente di creare pagine web dinamiche ed estremamente interattive. Possiamo aggiornare il contenuto di una pagina in tempo reale, rendendo l'esperienza dell'utente più coinvolgente. Inoltre, possiamo aprire e chiudere i menu, visualizzare popup e tanto altro.
Nelle prossime lezioni, approfondiremo l'utilizzo del DOM con JavaScript.