DOM: introduzione
Introduzione al DOM
Il DOM è la rappresentazione ad albero del documento. Ogni tag è un nodo con figli. Il DOM è un’API del browser: JavaScript la usa per leggere e aggiornare struttura, contenuto e attributi.
Cos’è e come è fatto
Il DOM rappresenta l’HTML come un albero di nodi. Tipi principali: Document (radice), Element (tag), Text (testo). JavaScript usa le API del browser per leggere e modificare struttura, contenuto e attributi.
Nodi principali:
- Document (radice)
- Element (tag)
- Text (testo)
- Gli attributi si gestiscono tramite proprietà o
getAttribute/setAttribute
Accesso ai nodi principali
Si può ispezionare il documento e i nodi di alto livello per capire la struttura corrente.
Document, html, head, body

console.log(document); // nodo radice del DOM
console.log(document.documentElement); // <html> (intero albero)
console.log(document.head); // <head>
console.log(document.body); // <body>
console.log(document.body.children); // HTMLCollection dei figli diretti di <body>
Selezione degli elementi
Per lavorare con il DOM è fondamentale saper selezionare gli elementi della pagina.
getElementById()
recupera un singolo elemento in base al suo attributo id (molto veloce ed efficiente).querySelector()
permette di cercare un elemento usando un selettore CSS (ritorna solo il primo elemento che corrisponde).querySelectorAll()
invece restituisce tutti gli elementi che corrispondono al selettore, sotto forma di unaNodeList
che può essere iterata conforEach()
.
getElementById, querySelector, querySelectorAll

let titolo = document.getElementById("titolo");
console.log(titolo.textContent); // stampa il testo del titolo
let primoPar = document.querySelector("p");
console.log(primoPar.textContent); // stampa il contenuto del primo <p>
let paragrafi = document.querySelectorAll("p");
paragrafi.forEach(p => console.log(p.textContent)); // stampa tutti i testi dei <p>
Attributi e classi
Gli attributi si leggono/scrivono con proprietà specifiche o con le API generiche. Le classi si gestiscono con classList
.
getAttribute/setAttribute e classList

let link = document.querySelector("a");
console.log(link.getAttribute("href")); // legge l'attributo href
link.setAttribute("target", "_blank"); // imposta l'apertura in nuova scheda
let card = document.querySelector(".card");
card.classList.add("attiva"); // aggiunge la classe
card.classList.toggle("scura"); // se presente la rimuove, altrimenti la aggiunge
card.classList.remove("attiva"); // rimuove la classe
Contenuti: textContent vs innerHTML
textContent
tratta la stringa come testo letterale (sicuro). innerHTML
interpreta la stringa come HTML (usare solo con contenuto fidato).
Scrittura di testo e HTML interno

let box = document.querySelector("#box");
box.textContent = "<b>testo</b>"; // mostra i simboli come testo
box.innerHTML = "<b>testo</b>"; // renderizza il grassetto
Creare, inserire e rimuovere nodi
Si crea con createElement
, si assegna il contenuto, poi si inserisce con append
/prepend
/before
/after
.
Per eliminare un nodo usa remove
.
Inserimento dinamico in una lista

let ul = document.querySelector("ul");
let li = document.createElement("li");
li.textContent = "Voce dinamica"; // testo della nuova voce
ul.append(li); // inserisce alla fine della lista
let nota = document.createElement("p");
nota.textContent = "Nota prima della lista";
ul.before(nota); // posiziona il paragrafo prima della <ul>
li.remove(); // rimuove la voce inserita
Quando eseguire il codice
Assicurati che il DOM sia pronto. Usa l’evento DOMContentLoaded
o l’attributo defer
nello script.
Eseguire il codice quando il DOM è pronto

document.addEventListener("DOMContentLoaded", () => {
console.log("DOM pronto"); // gli elementi della pagina sono disponibili
});
// In alternativa in HTML: <script src="app.js" defer></script>
Tabella riassuntiva
API/Concetto | Descrizione | Esempio |
---|---|---|
document, head, body | Nodi principali del documento | document.body |
getElementById | Selezione diretta per ID | document.getElementById("titolo") |
querySelector / All | Selettori CSS per cercare nodi | document.querySelector(".item") |
textContent | Scrive/legge testo senza HTML | el.textContent = "Ciao" |
innerHTML | Scrive/legge HTML (attenzione sicurezza) | el.innerHTML = "<b>Ok</b>" |
get/setAttribute | Gestione generica degli attributi | el.setAttribute("title","info") |
classList | Gestione delle classi CSS | el.classList.toggle("on") |
createElement + append | Crea e inserisce nuovi nodi | ul.append(li) |
remove | Rimuove un nodo dal DOM | el.remove() |
DOMContentLoaded / defer | Esecuzione a DOM pronto | document.addEventListener(...) |