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.
Come è strutturato 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:
Come accedere agli elementi del DOM
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.
Cosa si può fare con JavaScript e il DOM di HTML
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.
Vantaggi dell'utilizzo del DOM con JavaScript
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.