JS: Il DOM

Il DOM (Document Object Model) è la rappresentazione della pagina HTML che il browser mantiene in memoria mentre la pagina è aperta. JavaScript non “legge il file HTML”: legge e modifica il DOM — e il browser ridisegna la pagina di conseguenza. Capire questo distingue chi “usa” JS a memoria da chi capisce cosa sta facendo davvero.

Selezionare elementi

<h1 id="titolo">Benvenuti</h1>
<p class="testo">Primo paragrafo</p>
<p class="testo">Secondo paragrafo</p>

// Un elemento per id (restituisce UN elemento, o null se non esiste)
const titolo = document.getElementById("titolo");

// Tutti gli elementi che soddisfano un selettore CSS (restituisce una lista)
const paragrafi = document.querySelectorAll(".testo");

// Un solo elemento, il primo che soddisfa il selettore
const primoParagrafo = document.querySelector(".testo");

querySelectorAll accetta qualunque selettore CSS — esattamente la stessa sintassi del CSS: .classe, #id, nav > li, p.testo!

Tip

querySelectorAll ritorna una struttura simile a una lista Python, ma non è esattamente una lista (si chiama NodeList):
Per ora, sappi solo che for...of funziona sempre.

const paragrafi = document.querySelectorAll(".testo");

for (const p of paragrafi) {
    console.log(p.textContent);
}

Leggere e modificare il contenuto

const titolo = document.getElementById("titolo");

console.log(titolo.textContent); // legge il testo: "Benvenuti"

titolo.textContent = "Ciao a tutti!"; // modifica il testo

textContent legge o scrive il testo puro di un elemento. Esiste anche innerHTML, che legge/scrive interpretando i tag HTML al suo interno — utile in certi casi, ma va usato con cautela: se il testo che inserisci arriva da un utente (es. un campo di input), innerHTML può eseguire codice non voluto. Per testo semplice, preferite sempre textContent.

Modificare attributi e classi

const immagine = document.querySelector("img");

immagine.setAttribute("src", "nuova_foto.jpg");
immagine.setAttribute("alt", "Nuova descrizione");

// Leggere un attributo
console.log(immagine.getAttribute("src"));

Per le classi CSS esiste una proprietà dedicata, classList, più comoda di setAttribute("class", ...):

const scheda = document.querySelector(".scheda");

scheda.classList.add("evidenziata");     // aggiunge una classe
scheda.classList.remove("evidenziata");  // la rimuove
scheda.classList.toggle("evidenziata");  // la aggiunge se assente, la rimuove se presente

classList.toggle(...) è particolarmente utile: è esattamente il meccanismo con cui si costruisce un interruttore (mostra/nascondi, tema chiaro/scuro, menu aperto/chiuso) — molto più diretto che scrivere if / else per decidere se aggiungere o togliere una classe.

Modificare lo stile direttamente

const titolo = document.getElementById("titolo");

titolo.style.color = "navy";
titolo.style.fontSize = "32px"; // notare: font-size diventa fontSize (camelCase)

Utile per cambiamenti puntuali via JS, ma non è la strada preferita per gli stili “stabili”: quelli restano nel .css. style.* da JS lo userete soprattutto per cambiamenti dinamici legati a un evento (es. cambiare colore al click), non per lo stile di base della pagina.

Creare e rimuovere elementi

const lista = document.querySelector("ul");

// Creare un nuovo elemento
const nuovoElemento = document.createElement("li");
nuovoElemento.textContent = "Nuovo elemento";

// Aggiungerlo alla pagina
lista.appendChild(nuovoElemento);

// Rimuovere un elemento
nuovoElemento.remove();

Il tema chiaro/scuro, versione JavaScript

Riprendiamo l’esempio del tema CSS-only con la checkbox nascosta e vediamo la versione “con logica”:

<button id="toggle-tema">Cambia tema</button>

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

body.scuro {
    background-color: #222;
    color: white;
}

const bottone = document.getElementById("toggle-tema");

bottone.addEventListener("click", () => {
    document.body.classList.toggle("scuro");
});

Confrontatelo con la versione CSS-only: lì il “cervello” dell’interruttore era tutto nel CSS (:checked + ~); qui il cervello è nel JS (addEventListener + classList.toggle), e il CSS si limita a definire come appare la classe .scuro, senza sapere quando viene applicata.

È una distinzione che tornerà spesso: CSS descrive l’aspetto, JS decide quando cambiarlo.

Esercizi

Esercizio w331

Crea una pagina con un <h1 id="titolo"> e un bottone. Al click del bottone, cambia il testo del titolo con textContent.

Esercizio w332

Crea 3 <p class="riga"> nella pagina. Usando querySelectorAll e un ciclo for...of, stampa in console il testo di ognuno.

Esercizio w333

Crea un <div class="box"> con un po’ di stile CSS di base, e un bottone. Al click, usa classList.toggle per aggiungere/rimuovere una classe evidenziato che cambi colore di sfondo del box.

Esercizio w334

Nel seguente codice il tema non cambia mai: si usa innerHTML per aggiungere del testo invece di classList.toggle per cambiare classe. Correggi il problema in modo che il click aggiunga/rimuova la classe scuro sul <body>:

const bottone = document.getElementById("toggle-tema");

bottone.addEventListener("click", () => {
    document.body.innerHTML += "scuro";
});