Fondamenta10 min

DOM e Eventi

Selezionare elementi HTML, modificare il DOM e gestire gli eventi utente con JavaScript.

DOM e Eventi

Il DOM (Document Object Model) è la rappresentazione ad albero della pagina HTML. JavaScript lo usa per leggere, modificare e reagire alle azioni dell'utente.

Selezionare elementi

javascript

// Singolo elemento
const titolo = document.querySelector("h1");
const btn = document.getElementById("invia");

// Multipli elementi
const paragrafi = document.querySelectorAll("p");

Modificare il DOM

javascript

// Cambiare testo e stile
titolo.textContent = "Nuovo titolo";
titolo.style.color = "blue";

// Aggiungere/rimuovere classi CSS
btn.classList.add("attivo");
btn.classList.toggle("nascosto");

Creare elementi

javascript

const lista = document.querySelector("ul");
const nuovoItem = document.createElement("li");
nuovoItem.textContent = "Elemento aggiunto";
lista.appendChild(nuovoItem);

Gestire eventi

javascript

btn.addEventListener("click", function(evento) {
  evento.preventDefault();
  console.log("Bottone cliccato!");
});

// Con arrow function
const input = document.querySelector("input");
input.addEventListener("input", (e) => {
  console.log("Valore:", e.target.value);
});

Event delegation

Invece di aggiungere un listener a ogni elemento figlio, ne aggiungi uno solo al genitore:

javascript

lista.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("completato");
  }
});

L'event delegation sfrutta il bubbling degli eventi ed è più efficiente quando hai molti elementi interattivi.