W3docs
it
Accedi

Javascript e il DOM

Impara ad accedere, aggiornare e manipolare il Document Object Model (DOM) con JavaScript: seleziona elementi, modifica contenuti, stili e gestisci eventi.

Informazione

Abbiamo una sezione completa dedicata al JavaScript DOM. Puoi esplorarla per esempi e spiegazioni dettagliate.

Introduzione a JavaScript e il DOM

JavaScript è il linguaggio di scripting che dà vita alle pagine web. Il Document Object Model (DOM) è il ponte che gli permette di farlo: quando un browser carica un documento HTML, analizza il markup e lo trasforma in un albero di oggetti in memoria, vivo e dinamico. JavaScript legge e scrive questo albero, e il browser ridisegna immediatamente la pagina di conseguenza. È così che un documento statico diventa interattivo — i pulsanti rispondono, i contenuti si aggiornano e gli stili cambiano senza ricaricare la pagina.

Questa pagina copre gli elementi essenziali: come è strutturato il DOM, come selezionare gli elementi, come modificarne il contenuto e gli stili e come rispondere agli eventi utente. Ogni argomento rimanda a un capitolo più approfondito quando si desidera maggior dettaglio.

Comprendere il DOM

Il DOM è una rappresentazione strutturata ad albero del tuo documento HTML. Ogni tag, attributo e porzione di testo diventa un nodo — un object che JavaScript può leggere e modificare. Poiché l'albero è vivo, modificare un nodo cambia immediatamente ciò che l'utente vede.

È utile distinguere tre termini che si confondono facilmente:

  • DOM — il modello a oggetti che il browser costruisce dal tuo HTML. Non è il sorgente HTML; è la versione analizzata e normalizzata dal browser.
  • document — l'object globale che è il punto d'ingresso all'albero DOM. Ogni selezione parte da qui (o da un altro elemento).
  • Node — un singolo punto dell'albero. Elementi (<div>, <p>), testo e commenti sono tutti nodi; i nodi elemento sono quelli con cui di solito si lavora.

Per un'analisi più completa dei tipi di nodo e della forma dell'albero, consulta Understanding the DOM nodes e Traversing the DOM.

JavaScript offre diversi metodi per trovare elementi nell'albero e agire su di essi.

Un albero DOM che mostra l'elemento html ramificato nei nodi head e body

L'albero seguente ha una radice document, un elemento <html> con figli <head> e <body>, e nodi di testo all'interno dei titoli e dei paragrafi:

<!DOCTYPE html>
<html>
  <head>
    <title>Text</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
Provalo tu stesso »

Metodi principali di selezione

  • document.getElementById() — restituisce il singolo elemento con quell'id, oppure null se non esiste.
  • document.getElementsByClassName() — restituisce un HTMLCollection live degli elementi con quella classe.
  • document.getElementsByTagName() — restituisce un HTMLCollection live degli elementi con quel tag.
  • document.querySelector() — restituisce il primo elemento che corrisponde a qualsiasi selettore CSS, oppure null.
  • document.querySelectorAll() — restituisce un NodeList statico di tutti gli elementi corrispondenti.

Quale usare? Nel codice moderno, querySelector e querySelectorAll coprono quasi ogni caso perché accettano la sintassi completa dei selettori CSS (#id, .class, div > p, [type="text"]). Usa getElementById solo quando vuoi la ricerca più veloce possibile tramite un id noto.

Due distinzioni sono importanti in pratica:

  • Live vs. statico. Un HTMLCollection live (da getElementsBy*) si aggiorna automaticamente al variare del DOM; un NodeList statico (da querySelectorAll) è uno snapshot preso al momento della chiamata.
  • Iterazione. Un NodeList supporta direttamente forEach; un HTMLCollection no, quindi convertilo prima con Array.from(collection).

Per maggiori dettagli, consulta Selecting DOM elements.

Manipolare gli elementi DOM

Una volta ottenuto un riferimento a un elemento, puoi modificarne il contenuto, gli attributi e l'aspetto — e la pagina si aggiorna immediatamente.

Operazioni comuni

  • Modificare il contenuto: Usa element.innerHTML o element.textContent.
  • Modificare gli stili: Accedi alla proprietà element.style.
  • Creare elementi: Usa document.createElement().
  • Aggiungere elementi: Usa parentElement.appendChild(newElement).
  • Rimuovere elementi: Usa parentElement.removeChild(existingElement).
Attenzione

innerHTML analizza la stringa come HTML, quindi inserire input non attendibile apre una vulnerabilità XSS. Usa textContent ogni volta che inserisci testo semplice — è più sicuro e più veloce.

Consulta DOM manipulation e Working with styles in the DOM per una trattazione più approfondita.

Gestione degli eventi in JavaScript

Un evento è qualcosa che accade nella pagina — un clic, la pressione di un tasto, l'invio di un modulo, il completamento del caricamento della pagina. JavaScript può registrare un listener che esegue una funzione ogni volta che un determinato evento si verifica su un determinato elemento.

Sintassi del listener di eventi

element.addEventListener('event', functionToCall);

Il primo argomento è il nome dell'evento (senza prefisso on — è 'click', non 'onclick'). Il secondo è l'handler, la funzione che il browser chiama quando l'evento si verifica.

Eventi principali

  • Click Events: Attivati dai clic dell'utente.
  • Load Events: Generati quando le risorse sono caricate.
  • Input Events: Si verificano quando gli utenti interagiscono con i campi di input.

Esempio di gestione degli eventi

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', function() {
            alert('Button Clicked!');
        });
    </script>
</body>
</html>
Provalo tu stesso »

Per una panoramica più ampia del modello degli eventi — bubbling, l'object evento e la rimozione dei listener — leggi Introduction to browser events e Event handling in the DOM.

Manipolazioni DOM avanzate

Oltre alle modifiche di base, JavaScript supporta operazioni più complesse come la clonazione di nodi, la gestione dei moduli e l'attivazione/disattivazione delle classi CSS.

Tecniche

  • Clonare nodi — element.cloneNode(true) copia un elemento e i suoi discendenti (false copia solo l'elemento stesso).
  • Gestione dei moduli — leggi input.value, reagisci all'evento submit e valida prima dell'invio.
  • Manipolare le classi CSS — element.classList.add(), .remove() e .toggle() sono più puliti che sovrascrivere className.

L'API classList è il modo idiomatico per attivare e disattivare gli stili. Questo snippet eseguibile mostra la logica seguita da toggle:

// classList.toggle removes a class if present, adds it if absent.
// Here we model that behaviour with a plain Set to show the result.
const classes = new Set(['box']);

function toggle(name) {
  if (classes.has(name)) {
    classes.delete(name);
  } else {
    classes.add(name);
  }
  return classes.has(name);
}

console.log(toggle('active')); // true  (added)
console.log(toggle('active')); // false (removed)
console.log([...classes]);     // [ 'box' ]

JavaScript e DOM: best practice

Per usare il DOM in modo efficiente, tieni a mente questi punti:

  • Minimizza gli accessi al DOM. Leggere e scrivere nel DOM è molto più lento che lavorare con valori JavaScript. Memorizza i riferimenti nella cache e raggruppa le modifiche invece di toccare il DOM in un ciclo stretto.
  • Usa la delegazione degli eventi. Invece di un listener per ogni elemento figlio, collega un singolo listener al genitore e controlla event.target. Questo gestisce automaticamente i figli aggiunti dinamicamente e utilizza meno memoria.
  • Comprendi reflow e repaint. Un reflow ricalcola il layout; un repaint ridisegna i pixel. Entrambi sono costosi, quindi raggruppa le scritture di stile e preferisci DocumentFragment per inserimenti multipli. Consulta DOM performance optimization.

Esempio di delegazione degli eventi

Invece di associare un handler a ogni <li>, associane uno alla lista e leggi quale elemento è stato cliccato:

document.getElementById('list').addEventListener('click', function (event) {
  // event.target is the actual element the user clicked.
  if (event.target.tagName === 'LI') {
    console.log('You clicked:', event.target.textContent);
  }
});

JavaScript e DOM: esempi di codice

Modificare il contenuto

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="content">Original Content</div>
    <script>
        document.getElementById('content').innerHTML = 'Updated Content';
    </script>
</body>
</html>
Provalo tu stesso »

Aggiungere nuovi elementi

<!DOCTYPE html>
<html>
<head>
    <title>Add Elements</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var newElement = document.createElement('p');
        newElement.textContent = 'New Paragraph';
        document.getElementById('container').appendChild(newElement);
    </script>
</body>
</html>
Provalo tu stesso »

Ricorda, padroneggiare JavaScript e il DOM è un percorso di apprendimento continuo. Continua a sperimentare, costruire e affinare le tue competenze per diventare uno sviluppatore JavaScript esperto.

Esercitazione

Pratica
Qual è il ruolo di JavaScript con il Document Object Model (DOM)?
Qual è il ruolo di JavaScript con il Document Object Model (DOM)?
Was this page helpful?