1. Introduzione: perché manipolare DOM in JavaScript?
Se vuoi manipolare DOM in JavaScript per creare interfacce web veramente interattive e dinamiche, devi prima comprendere cos’è il DOM. Il DOM (Document Object Model) è la rappresentazione strutturale di un documento HTML o XML sotto forma di oggetti interconnessi. In poche parole, è l’albero gerarchico che descrive come ogni elemento della tua pagina (tag HTML, attributi, testo, ecc.) è collegato agli altri.
Il grande vantaggio del DOM è che permette di trasformare una semplice pagina statica in una vera applicazione web, dandoti la possibilità di:
- Aggiungere o rimuovere elementi in tempo reale.
- Modificare stili, attributi e contenuti.
- Gestire eventi (clic, scroll, digitazione) per migliorare l’esperienza utente.
Nei prossimi paragrafi vedrai come manipolare DOM in JavaScript e perché questa abilità è fondamentale per ogni sviluppatore front-end.
2. Struttura del DOM: le basi per manipolare DOM in JavaScript
Il DOM descrive l’HTML come un albero in cui il nodo “radice” corrisponde al tag <html> e da lì discendono tutti gli altri nodi. Ecco i concetti chiave:
- Element Node: rappresenta un tag HTML, come
<div>,<header>,<ul>, ecc. - Attribute Node: ogni elemento può avere attributi (es.
class,id,data-*), i cui valori forniscono informazioni aggiuntive. - Text Node: il testo racchiuso all’interno di un elemento (es. il contenuto di un
<p>).
2.1 Nodi, gerarchie e parentele
Parlare di “struttura ad albero” significa che ogni elemento può avere dei “figli” (altri elementi al suo interno) e un “genitore” (l’elemento che lo racchiude). Capire questa relazione è il primo passo per manipolare DOM in JavaScript in modo preciso, accedendo esattamente all’elemento di cui hai bisogno.
2.2 Perché la gerarchia è fondamentale?
Essendo un albero, basta conoscere “il percorso” per raggiungere qualunque nodo. Ciò rende il codice più ordinato ed evita modifiche involontarie su elementi non desiderati.
3. Come accedere agli elementi del DOM
Per manipolare DOM in JavaScript, devi prima selezionare gli elementi che vuoi modificare. Ecco i metodi principali:
3.1 document.getElementById()
const elemento = document.getElementById('mio-id');Seleziona l’elemento col corrispondente attributo id. Restituisce null se non lo trova.
3.2 document.getElementsByClassName()
const elementi = document.getElementsByClassName('nome-classe');Ritorna una HTMLCollection iterabile (ma non un vero array).
3.3 document.getElementsByTagName()
const paragrafi = document.getElementsByTagName('p');Anche questo metodo restituisce una HTMLCollection.
3.4 document.querySelector() e document.querySelectorAll()
Metodi più moderni e versatili, poiché accettano selettori CSS:
const primoParagrafo = document.querySelector('p');
const tuttiIParagrafi = document.querySelectorAll('p');querySelector() restituisce il primo elemento corrispondente, mentre querySelectorAll() una NodeList contenente tutti gli elementi selezionati.
4. Come manipolare DOM in JavaScript: modificare contenuti, classi, attributi e stili
Dopo aver selezionato un elemento, puoi modificarlo in vari modi.
4.1 Cambiare il contenuto testuale
const titolo = document.getElementById('titolo-principale');
titolo.textContent = 'Benvenuto sul mio sito!';textContent riscrive il testo interno di un elemento senza formattazione HTML.
4.2 Sostituire l’HTML interno
const contenitore = document.querySelector('.contenitore');
contenitore.innerHTML = '<h2>Nuovo sottotitolo</h2><p>Testo aggiornato...</p>';
Fai attenzione a possibili rischi di sicurezza (XSS) se inserisci dati non controllati.
4.3 Gestire classi e attributi
elemento.classList.add('nuova-classe');
elemento.classList.remove('vecchia-classe');
elemento.classList.toggle('attiva');Per gli attributi:
elemento.setAttribute('data-info', 'valore');
const valore = elemento.getAttribute('data-info');
elemento.removeAttribute('data-info');4.4 Stili in linea
elemento.style.color = 'red';
elemento.style.fontSize = '20px';Meglio però modificare le classi CSS, per un codice più mantenibile.
5. Creare, aggiungere o rimuovere elementi dal DOM
5.1 Creare nuovi elementi
const nuovoParagrafo = document.createElement('p');
nuovoParagrafo.textContent = 'Ciao, sono un nuovo paragrafo creato dinamicamente!';5.2 Inserire nel DOM
const contenitoreTesto = document.querySelector('#contenitore-testo');
contenitoreTesto.appendChild(nuovoParagrafo);
Oppure:
contenitoreTesto.append('Testo semplice', nuovoParagrafo);
5.3 Rimuovere dal DOM
nuovoParagrafo.remove();
// Oppure
contenitoreTesto.removeChild(nuovoParagrafo);6. Eventi e listener: altro pilastro per manipolare DOM in JavaScript
La manipolazione del DOM è strettamente legata alla gestione degli eventi (click, hover, scroll, ecc.).
6.1 Assegnare un event listener
const bottone = document.getElementById('btn-cliccami');
bottone.addEventListener('click', function() {
alert('Hai cliccato il bottone!');
});6.2 Rimuovere un event listener
function saluta() {
console.log('Ciao!');
}
bottone.addEventListener('click', saluta);
// ...
bottone.removeEventListener('click', saluta);6.3 Event delegation
Per non assegnare l’evento a ogni singolo elemento in una lista, è più efficiente agganciare il listener al contenitore padre e verificare chi ha generato l’evento.
7. Best practice per manipolare DOM in JavaScript
- Usa i metodi moderni (
querySelector,querySelectorAll) per selezionare gli elementi in modo leggibile. - Evita
innerHTMLse non necessario, per questioni di sicurezza e prestazioni. - Raggruppa modifiche massicce in un frammento (
DocumentFragment) prima di inserirlo nel DOM, riducendo reflow e repaint. - Event delegation se hai liste lunghe e dinamiche, evitando di assegnare troppi listener.
- Separa logica e stile: modifica le classi CSS invece di impostare stili in linea.
8. Esempi di mini progetti
8.1 Toggling di un menu
<button id="btn-menu">Apri/Chiudi Menu</button>
<nav id="menu" class="menu-chiuso">
<ul>
<li>Home</li>
<li>Servizi</li>
<li>Contatti</li>
</ul>
</nav>
.menu-chiuso {
display: none;
}const btnMenu = document.getElementById('btn-menu');
const menu = document.getElementById('menu');
btnMenu.addEventListener('click', () => {
menu.classList.toggle('menu-chiuso');
});
8.2 Form dinamici
<form id="mio-form">
<input type="text" placeholder="Inserisci testo" />
<button id="aggiungi-campo">Aggiungi Campo</button>
</form>
const form = document.getElementById('mio-form');
const btnAggiungiCampo = document.getElementById('aggiungi-campo');
btnAggiungiCampo.addEventListener('click', (event) => {
event.preventDefault(); // Evita il submit del form
// Crea un nuovo input di testo
const nuovoInput = document.createElement('input');
nuovoInput.type = 'text';
nuovoInput.placeholder = 'Nuovo campo';
// Inserisce il nuovo input prima del bottone
form.insertBefore(nuovoInput, btnAggiungiCampo);
});
9. Conclusione + CTA
Adesso sai come manipolare DOM in JavaScript: hai imparato a selezionare elementi, a modificarne i contenuti, a gestire eventi e a creare e rimuovere nodi. Questi concetti sono le fondamenta per sviluppare applicazioni web dinamiche.
Metti subito in pratica ciò che hai appreso e sperimenta nei tuoi progetti: la manipolazione del DOM è la chiave per passare da siti statici a vere web app ricche di funzionalità!
