JavaScript — DOM e Eventi 2026

🔍 Il DOM — la rappresentazione della pagina che JavaScript può leggere

Il DOM (Document Object Model) è la rappresentazione ad albero della pagina HTML che il browser costruisce e che JavaScript può leggere e modificare. Ogni tag HTML diventa un "nodo" che puoi selezionare, leggere e cambiare da codice.

// Selezionare UN SOLO elemento tramite il suo id: const titolo = document.getElementById('titolo-corso'); // querySelector: sintassi CSS, restituisce il PRIMO elemento che corrisponde const primoBottone = document.querySelector('.btn'); // prima classe .btn const perId = document.querySelector('#titolo-corso'); // per id // querySelectorAll: restituisce TUTTI gli elementi che corrispondono const tuttiIBottoni = document.querySelectorAll('.btn'); console.log(tuttiIBottoni.length); // → numero di elementi trovati

💡 querySelector è il più versatile: accetta qualsiasi selettore CSS valido (classi, id, tag, attributi, combinazioni) — per questo è oggi il metodo più usato, più di getElementById/getElementsByClassName.

⚠️ querySelectorAll non è un vero Array

const bottoni = document.querySelectorAll('.btn'); // Ha .length e si può iterare con forEach, MA non ha map/filter/reduce direttamente: bottoni.forEach(btn => console.log(btn.textContent)); // ✅ funziona // bottoni.map(...) → ❌ Errore! NodeList non ha map() // Per usare i metodi degli array, converti prima: const array = Array.from(bottoni); array.map(btn => btn.textContent); // ✅ ora funziona

⚠️ querySelectorAll() restituisce una NodeList, non un Array — supporta forEach ma non map/filter/reduce. Serve Array.from() per convertirla se ti servono quei metodi.

✏️ Leggere e modificare il contenuto di un elemento

const titolo = document.querySelector('h1'); // Leggere il testo: console.log(titolo.textContent); // Modificare il testo: titolo.textContent = 'Nuovo titolo'; // innerHTML permette anche di inserire tag HTML: titolo.innerHTML = 'Titolo enfatizzato';

⚠️ textContent vs innerHTML: textContent tratta tutto come testo puro (sicuro, niente HTML interpretato); innerHTML interpreta il contenuto come HTML — utile per inserire tag, ma pericoloso con input dell'utente non controllato (rischio di injection). Usa textContent quando possibile.

🎛️ Leggere e modificare attributi e stili

const immagine = document.querySelector('img'); console.log(immagine.getAttribute('src')); immagine.setAttribute('src', 'nuova-foto.jpg'); immagine.setAttribute('alt', 'Descrizione aggiornata'); // Modificare lo stile CSS direttamente: immagine.style.border = '2px solid red'; immagine.style.opacity = '0.5';

💡 Per stili CSS composti da più parole (es. background-color), in JavaScript si usa il camelCase: elemento.style.backgroundColor, non elemento.style.background-color (il trattino non è valido in un nome di proprietà JS).

🎨 classList — il modo corretto di gestire le classi CSS

Invece di riscrivere manualmente l'attributo class per intero, classList offre metodi dedicati per aggiungere, rimuovere o alternare singole classi senza toccare le altre già presenti.

const box = document.querySelector('.box'); box.classList.add('attivo'); // aggiunge la classe 'attivo' box.classList.remove('nascosto'); // rimuove la classe 'nascosto' box.classList.toggle('visibile'); // la aggiunge se assente, la rimuove se presente console.log(box.classList.contains('attivo')); // → true

✅ toggle() è perfetto per menu a scomparsa, dark mode, accordion — qualsiasi elemento che deve "attivarsi/disattivarsi" con un click, senza dover controllare manualmente lo stato attuale.

👂 addEventListener — reagire alle azioni dell'utente

addEventListener collega una funzione a un elemento, in modo che venga eseguita quando un evento specifico si verifica (click, digitazione, invio di un form...).

const bottone = document.querySelector('#miobottone'); bottone.addEventListener('click', () => { console.log('Bottone cliccato!'); }); // Altri eventi comuni: input.addEventListener('input', () => console.log('valore cambiato')); form.addEventListener('submit', (e) => { e.preventDefault(); }); // blocca l'invio standard document.addEventListener('keydown', (e) => console.log(e.key));

💡 e.preventDefault() è fondamentale sui form: senza di esso, inviare un form con submit ricarica automaticamente la pagina (comportamento predefinito del browser) — spesso non quello che vuoi in un'app moderna.

🎯 L'oggetto evento — informazioni su cosa è successo

bottone.addEventListener('click', (evento) => { console.log(evento.target); // l'elemento HTML esatto che ha scatenato l'evento console.log(evento.type); // → 'click' console.log(evento.clientX, evento.clientY); // coordinate del mouse });

✅ Il parametro dell'evento (spesso chiamato e o event) è passato automaticamente da addEventListener e contiene sempre informazioni utili su cosa è successo e dove.

➕ Creare nuovi elementi da JavaScript

const nuovoParagrafo = document.createElement('p'); nuovoParagrafo.textContent = 'Sono un paragrafo creato da JS!'; nuovoParagrafo.classList.add('evidenziato'); // Aggiungerlo alla pagina, dentro un contenitore esistente: const contenitore = document.querySelector('#lista'); contenitore.appendChild(nuovoParagrafo);

💡 Il pattern è sempre lo stesso in 3 passi: createElement() per crearlo, configuralo (testo, classi, attributi), poi appendChild() per inserirlo davvero nella pagina — un elemento creato ma non "appeso" non è visibile.

🗑️ Rimuovere elementi dalla pagina

const elemento = document.querySelector('.da-rimuovere'); elemento.remove(); // rimuove l'elemento dal DOM — metodo moderno, diretto

✅ .remove() è il metodo moderno e diretto (dal 2015 circa) — prima si doveva risalire al genitore con elemento.parentNode.removeChild(elemento), sintassi più contorta che oggi non serve quasi più.

🧪 Demo dal vivo — prova il DOM sulla pagina reale

Questi pulsanti eseguono davvero le operazioni DOM sulla casella qui sotto — provale per vedere l'effetto immediato.

Casella dimostrativa — clicca i pulsanti sopra

JavaScript — DOM e Eventi

Report Quiz

🎓 Attestato di Competenze sbloccato!