Manipolare il DOM e reagire agli eventi con JavaScript

Il Document Object Model (DOM) è una rappresentazione strutturata di documenti HTML e XML come un albero di nodi. In JavaScript, il DOM fornisce una serie di API per manipolare il contenuto, la struttura e lo stile di documenti web. Gli eventi sono azioni o occorrenze rilevate da un browser web che possono essere catturate e gestite da JavaScript.

Certamente, esploriamo più a fondo il Document Object Model (DOM) e il suo ruolo nel contesto dello sviluppo web con JavaScript.

Cos'è il Document Object Model (DOM)?

Il DOM è una rappresentazione neutrale dal punto di vista del linguaggio di programmazione di un documento web, come una pagina HTML o XML. In esso, ogni elemento del documento (come div, p, span, ecc.) è rappresentato come un nodo in un albero. Questo albero include non solo gli elementi, ma anche attributi, testo, e persino commenti.

Il DOM funge da ponte tra il contenuto di un documento HTML e il linguaggio di scripting (in questo caso JavaScript). Ciò consente agli sviluppatori di modificare dinamicamente il contenuto, la struttura e lo stile della pagina web.

Caratteristiche del DOM

Struttura ad Albero: Il DOM organizza un documento in una struttura ad albero, dove ogni nodo rappresenta una parte del documento (es. un elemento, un attributo, un testo). La radice dell'albero è generalmente il nodo document, da cui partono tutti gli altri nodi.

Nodi e Elementi: In questa struttura, i nodi possono essere di diversi tipi, come nodi di elemento (che rappresentano tag HTML), nodi di testo (il testo all'interno degli elementi HTML), e nodi attributo (che rappresentano gli attributi degli elementi HTML). Questa diversificazione rende il DOM estremamente versatile nella manipolazione di vari aspetti di una pagina web.

Manipolazione del DOM con JavaScript

JavaScript permette di selezionare elementi nel DOM usando metodi come getElementById(), getElementsByClassName(), getElementsByTagName(), e querySelector(). Questi metodi forniscono un modo per accedere ai nodi del DOM e manipolarli.

Per esempio, document.getElementById('idElemento') ritorna l'elemento con l'ID specificato.

Una volta selezionato un elemento, è possibile modificarne il contenuto usando proprietà come textContent o innerHTML. È anche possibile modificare gli attributi degli elementi, come class o style, per cambiare aspetto e comportamento degli elementi.

Ad esempio, cambiare il testo di un elemento potrebbe essere fatto così: elemento.textContent = 'Nuovo Testo';.

JavaScript consente anche di creare nuovi nodi nel DOM e di aggiungerli o rimuoverli dalla struttura della pagina. Questo permette di aggiungere dinamicamente contenuto, come nuovi elementi o testo, e di rimuovere elementi esistenti.

1// Aggiunta di un nuovo elemento
2const nuovoParagrafo = document.createElement("p");
3nuovoParagrafo.textContent = "Questo è un nuovo paragrafo.";
4document.body.appendChild(nuovoParagrafo);

Per esempio, per aggiungere un nuovo paragrafo si potrebbe usare document.createElement('p') e poi inserirlo nel DOM con appendChild().

Eventi e il DOM

Il DOM non è solo una rappresentazione statica; è interattivo. Gli eventi, come click, pressione di tasti, o movimenti del mouse, possono essere catturati e gestiti per creare pagine web interattive. Questo aspetto del DOM è fondamentale per creare un'esperienza utente dinamica.

JavaScript permette di assegnare "ascoltatori di eventi" a nodi del DOM. Questo significa che possiamo definire funzioni che vengono eseguite quando si verifica un certo evento su un elemento specifico.

Ma il discorso sugli eventi è ben più complesso e articolato. Vediamo.

Che cosa sono gli Eventi in JavaScript?

Gli eventi in JavaScript sono azioni o occorrenze che accadono in un browser web che il codice può rispondere a, come click del mouse, pressioni di tasti, cambiamenti di stato, ecc. Questi eventi possono essere generati sia dall'utente (eventi dell'interfaccia utente) che dal browser stesso (eventi come il caricamento della pagina).

Gli eventi in JavaScript seguono un percorso attraverso il DOM, conosciuto come "Event Flow". Questo flusso può essere catturato in due modi: "event capturing" e "event bubbling". In "event capturing", l'evento è catturato prima dai nodi antenati e poi propagato ai nodi discendenti, mentre in "event bubbling", l'evento inizia dal nodo più specifico e si propaga verso i nodi antenati.

Gestione degli Eventi

La gestione degli eventi in JavaScript avviene principalmente tramite l'uso di EventListeners. Un EventListener è una funzione che viene chiamata quando si verifica un evento specifico su un elemento. Per esempio, potresti voler eseguire una funzione quando un utente clicca su un bottone.

1   const button = document.getElementById('myButton');
2   button.addEventListener('click', function() {
3       console.log('Button clicked!');
4   });

Ci sono molti tipi di eventi in JavaScript, inclusi ma non limitati a click, keypress, mouseover, load, unload, change. Ogni tipo di evento rappresenta un tipo diverso di interazione dell'utente o del browser.

Quando un evento viene emesso, un oggetto event viene passato alla funzione di callback dell'EventListener. Questo oggetto contiene dettagli sull'evento, come il tipo di evento, il nodo di destinazione, e informazioni specifiche dell'evento come la posizione del mouse o il tasto premuto.

1   button.addEventListener('click', function(event) {
2       console.log('Button clicked at X:', event.clientX, 'Y:', event.clientY);
3   });

In alcuni casi, potresti voler prevenire il comportamento predefinito di un evento. Per esempio, prevenire che un form venga inviato quando clicchi su un bottone. Questo può essere fatto chiamando event.preventDefault() nella funzione di callback.

1   const form = document.getElementById('myForm');
2   form.addEventListener('submit', function(event) {
3       event.preventDefault();
4       // Codice aggiuntivo per gestire il submit
5   });

Delegazione degli Eventi

La delegazione degli eventi è una tecnica per gestire gli eventi in modo più efficiente. Invece di assegnare un event listener a ogni elemento singolo, puoi assegnare un event listener a un elemento genitore e sfruttare il "bubbling" degli eventi per catturarli.

Supponiamo di avere una lista di elementi e di voler rilevare i clic su ciascun elemento. Invece di assegnare un event listener a ogni elemento della lista, possiamo assegnarne uno solo al genitore.

1   const lista = document.getElementById('miaLista');
2   lista.addEventListener('click', function(event) {
3       if (event.target.tagName === 'LI') {
4           console.log('Elemento cliccato:', event.target.textContent);
5       }
6   });

Se vuoi vedere quasi tutto di quanto è stato scritto in questo articolo visualizza il tutorial che trovi al minuto 45:20 della video lezione.