{"id":164067,"date":"2026-01-24T09:00:00","date_gmt":"2026-01-24T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/html-javascript-dom-eventi-interattivita\/"},"modified":"2026-01-24T09:00:00","modified_gmt":"2026-01-24T08:00:00","slug":"html-javascript-dom-eventi-interattivita","status":"publish","type":"post","link":"https:\/\/nuovosito.gtechgroup.it\/blog\/html-javascript-dom-eventi-interattivita\/","title":{"rendered":"HTML e JavaScript: Il DOM, gli Eventi e l’Interattivit\u00e0"},"content":{"rendered":"

HTML fornisce la struttura e il contenuto, CSS l’aspetto visivo, ma \u00e8 JavaScript<\/strong> che rende le pagine web interattive e dinamiche. Il ponte tra HTML e JavaScript \u00e8 il DOM (Document Object Model)<\/strong>, un’interfaccia di programmazione che rappresenta il documento HTML come un albero di oggetti manipolabili. In questa guida esploreremo come JavaScript accede, modifica e interagisce con gli elementi HTML, dalle operazioni base alle tecniche avanzate.<\/p>\n

Il DOM: Document Object Model<\/h2>\n

Quando il browser carica una pagina HTML, analizza il codice sorgente e costruisce una rappresentazione ad albero in memoria chiamata DOM<\/strong>. Ogni elemento HTML diventa un nodo dell’albero, con relazioni genitore-figlio che riflettono la struttura di annidamento del markup. Ad esempio, un <div><\/code> che contiene un <p><\/code> diventa un nodo genitore con un nodo figlio.<\/p>\n

L’oggetto document<\/code> \u00e8 il punto di accesso al DOM. Tramite questo oggetto, JavaScript pu\u00f2 leggere, creare, modificare e rimuovere qualsiasi elemento della pagina. Il DOM non \u00e8 solo una rappresentazione passiva dell’HTML: \u00e8 un’interfaccia live<\/strong> \u2014 le modifiche al DOM si riflettono immediatamente nel rendering della pagina e viceversa.<\/p>\n

Il DOM include non solo gli elementi HTML ma anche i nodi di testo, i commenti e gli attributi. Tuttavia, nella pratica quotidiana, la maggior parte delle operazioni riguarda i nodi elemento<\/strong> (Element nodes), che corrispondono ai tag HTML. Comprendere il DOM \u00e8 fondamentale per qualsiasi sviluppatore web, poich\u00e9 \u00e8 la base su cui si costruiscono tutte le interazioni front-end.<\/p>\n

Accedere agli Elementi: Selettori e Query<\/h2>\n

JavaScript offre diversi metodi per selezionare elementi dal DOM. I pi\u00f9 utilizzati sono querySelector<\/code> e querySelectorAll<\/code>, che accettano qualsiasi selettore CSS valido:<\/p>\n

\/\/ Selezionare un singolo elemento (il primo che corrisponde)\nconst titolo = document.querySelector('h1');\nconst card = document.querySelector('.card.featured');\nconst input = document.querySelector('#email');\nconst link = document.querySelector('a[href^=\"https\"]');\n\n\/\/ Selezionare tutti gli elementi corrispondenti (NodeList)\nconst paragrafi = document.querySelectorAll('p');\nconst items = document.querySelectorAll('.lista-item');\n\n\/\/ Iterare su una NodeList\nitems.forEach(item => {\n  console.log(item.textContent);\n});<\/code><\/pre>\n
I metodi classici come getElementById<\/code>, getElementsByClassName<\/code> e getElementsByTagName<\/code> sono ancora disponibili e possono essere leggermente pi\u00f9 veloci in scenari specifici. La differenza principale \u00e8 che getElementById<\/code> restituisce un singolo elemento, mentre i metodi getElementsBy*<\/code> restituiscono HTMLCollection live<\/strong> che si aggiornano automaticamente quando il DOM cambia, a differenza della NodeList statica di querySelectorAll.<\/p>\n
Per navigare l’albero DOM a partire da un elemento gi\u00e0 selezionato, si possono usare le propriet\u00e0 di traversal: parentElement<\/code> (elemento genitore), children<\/code> (figli diretti), firstElementChild<\/code>, lastElementChild<\/code>, nextElementSibling<\/code> e previousElementSibling<\/code>. Il metodo closest()<\/code> \u00e8 particolarmente utile: risale l’albero DOM fino a trovare un antenato che corrisponde a un selettore CSS specificato.<\/p>\n
Modificare il Contenuto e la Struttura<\/h2>\n
Una volta selezionato un elemento, JavaScript pu\u00f2 modificarne il contenuto, gli attributi e lo stile. Le propriet\u00e0 pi\u00f9 utilizzate per il contenuto sono:<\/p>\n
const elemento = document.querySelector('.messaggio');\n\n\/\/ Modificare il testo (sicuro, non interpreta HTML)\nelemento.textContent = 'Nuovo testo del messaggio';\n\n\/\/ Modificare l'HTML interno (attenzione: rischio XSS se il contenuto proviene dall'utente)\nelemento.innerHTML = '<strong>Testo<\/strong> con <em>formattazione<\/em>';\n\n\/\/ Modificare attributi\nelemento.setAttribute('data-status', 'attivo');\nelemento.id = 'messaggio-principale';\nelemento.classList.add('visibile');\nelemento.classList.remove('nascosto');\nelemento.classList.toggle('evidenziato');\n\n\/\/ Modificare stili inline\nelemento.style.color = '#ff0000';\nelemento.style.fontSize = '18px';<\/code><\/pre>\n
Per creare nuovi elementi e aggiungerli al DOM, si utilizza document.createElement<\/code> combinato con metodi di inserimento:<\/p>\n
\/\/ Creare un nuovo elemento\nconst nuovoParagrafo = document.createElement('p');\nnuovoParagrafo.textContent = 'Questo paragrafo \u00e8 stato creato con JavaScript';\nnuovoParagrafo.classList.add('dinamico');\n\n\/\/ Aggiungere al DOM\ndocument.querySelector('.contenitore').appendChild(nuovoParagrafo);\n\n\/\/ Inserire prima di un elemento specifico\nconst riferimento = document.querySelector('.esistente');\nriferimento.parentElement.insertBefore(nuovoParagrafo, riferimento);\n\n\/\/ Metodo moderno: insertAdjacentHTML\nelemento.insertAdjacentHTML('beforeend', '<p>Nuovo paragrafo<\/p>');\n\n\/\/ Rimuovere un elemento\nelemento.remove();<\/code><\/pre>\n
La differenza tra textContent<\/code> e innerHTML<\/code> \u00e8 cruciale per la sicurezza<\/a>: textContent inserisce testo puro (i tag HTML vengono visualizzati come testo), mentre innerHTML interpreta il markup HTML. Se il contenuto proviene dall’utente, usare innerHTML senza sanitizzazione \u00e8 un vettore di attacco XSS.<\/p>\n
Eventi: Rendere la Pagina Interattiva<\/h2>\n
Gli eventi<\/strong> sono il meccanismo con cui JavaScript risponde alle azioni dell’utente e ai cambiamenti della pagina. Il metodo standard per gestire gli eventi \u00e8 addEventListener<\/code>:<\/p>\n
const pulsante = document.querySelector('#inviaForm');\n\n\/\/ Evento click\npulsante.addEventListener('click', function(event) {\n  event.preventDefault(); \/\/ Previene il comportamento default\n  console.log('Pulsante cliccato!');\n});\n\n\/\/ Evento submit su un form\nconst form = document.querySelector('form');\nform.addEventListener('submit', function(event) {\n  event.preventDefault();\n  const dati = new FormData(form);\n  console.log('Nome:', dati.get('nome'));\n});\n\n\/\/ Evento input (si attiva ad ogni modifica)\nconst campo = document.querySelector('#ricerca');\ncampo.addEventListener('input', function(event) {\n  console.log('Valore attuale:', event.target.value);\n});\n\n\/\/ Evento keydown\ndocument.addEventListener('keydown', function(event) {\n  if (event.key === 'Escape') {\n    chiudiModale();\n  }\n});<\/code><\/pre>\n
Gli eventi pi\u00f9 utilizzati includono: click<\/code> (click del mouse o tap), submit<\/code> (invio di un form), input<\/code> (modifica di un campo), change<\/code> (valore finale di un campo dopo il blur), keydown<\/code>\/keyup<\/code> (tasti della tastiera), focus<\/code>\/blur<\/code> (focus su un elemento), scroll<\/code> (scroll della pagina), resize<\/code> (ridimensionamento della finestra) e load<\/code> (caricamento completo della risorsa).<\/p>\n
Event Delegation, Bubbling e Data Attributes<\/h2>\n
L’event bubbling<\/strong> \u00e8 il meccanismo per cui un evento generato su un elemento risale (bubble up) attraverso tutti i suoi antenati fino al <document><\/code>. Questo meccanismo \u00e8 alla base dell’event delegation<\/strong>, una tecnica potente e performante per gestire eventi su molti elementi.<\/p>\n
Invece di aggiungere un event listener a ogni elemento di una lista (che potrebbe contenere centinaia di items), si aggiunge un singolo listener al contenitore:<\/p>\n
<ul id=\"lista-prodotti\">\n  <li data-id=\"1\" data-prezzo=\"29.99\">Prodotto A<\/li>\n  <li data-id=\"2\" data-prezzo=\"49.99\">Prodotto B<\/li>\n  <li data-id=\"3\" data-prezzo=\"19.99\">Prodotto C<\/li>\n<\/ul>\n\n<script>\ndocument.getElementById('lista-prodotti').addEventListener('click', function(event) {\n  const item = event.target.closest('li');\n  if (!item) return;\n\n  const id = item.dataset.id;\n  const prezzo = item.dataset.prezzo;\n  console.log('Selezionato prodotto', id, 'al prezzo di', prezzo);\n});\n<\/script><\/code><\/pre>\n
I data attributes<\/strong> (data-*<\/code>) sono attributi HTML personalizzati che permettono di associare dati arbitrari agli elementi. In JavaScript, si accede ad essi tramite la propriet\u00e0 dataset<\/code> dell’elemento. L’attributo data-prezzo=\"29.99\"<\/code> diventa element.dataset.prezzo<\/code> in JavaScript (il prefisso data-<\/code> viene rimosso e il nome viene convertito in camelCase).<\/p>\n
Infine, \u00e8 importante comprendere la differenza tra DOMContentLoaded<\/code> e load<\/code>: DOMContentLoaded<\/strong> si attiva quando l’HTML \u00e8 stato completamente analizzato e il DOM \u00e8 pronto, senza attendere immagini, fogli di stile e iframe. load<\/strong> si attiva quando tutte le risorse della pagina sono state scaricate. Per la maggior parte degli script che manipolano il DOM, DOMContentLoaded \u00e8 il momento giusto per iniziare, oppure si pu\u00f2 posizionare il tag <script><\/code> alla fine del <body><\/code> o utilizzare l’attributo defer<\/code>.<\/p>\n
Hai bisogno di aiuto con l’interattivit\u00e0 del tuo sito web? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML fornisce la struttura e il contenuto, CSS l’aspetto visivo, ma \u00e8 JavaScript che rende le pagine web interattive e dinamiche. Il ponte tra HTML…<\/p>\n","protected":false},"author":2,"featured_media":164247,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1246],"tags":[787],"class_list":["post-164067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164067"}],"version-history":[{"count":0,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164067\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164247"}],"wp:attachment":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}