Corso di JavaScript & Programmazione Web: 6 – Il DOM: manipolazione della pagina

6 – Il DOM: manipolazione della pagina

Obiettivi

• Comprendere cos’è il DOM (Document Object Model) e come rappresenta la struttura di una pagina web.

• Selezionare e manipolare elementi HTML usando JavaScript.

• Modificare testo, immagini, classi e stili dinamicamente.

• Creare e rimuovere elementi HTML tramite script.

• Sviluppare un mini-progetto pratico: una to-do list interattiva.

Contenuti

1️⃣ Cos’è il DOM

• Il DOM è una rappresentazione ad albero della pagina web.

• Ogni elemento HTML diventa un nodo che può essere letto e modificato con JavaScript.

2️⃣ Selezione degli elementi

• document.getElementById("id") → seleziona un elemento tramite l’id

• document.querySelector("selettore") → seleziona il primo elemento che corrisponde al selettore CSS

• document.querySelectorAll("selettore") → seleziona tutti gli elementi corrispondenti

3️⃣ Modifica degli elementi

• Testo: element.textContent = "Nuovo testo"

• HTML interno: element.innerHTML = "<strong>Testo in grassetto</strong>"

• Stile: element.style.color = "red"

• Classi:

  element.classList.add("nuova-classe");
  element.classList.remove("vecchia-classe");
  element.classList.toggle("classe-attiva");
  

4️⃣ Creazione e rimozione di elementi

• Creare un elemento:

  let li = document.createElement("li");
  li.textContent = "Nuovo elemento";
  document.querySelector("ul").appendChild(li);
  

• Rimuovere un elemento:

  let li = document.querySelector("li");
  li.remove();
  

Esercizio pratico: To-Do List interattiva

1. Creare una lista <ul> vuota in HTML.

2. Aggiungere un campo di input e un pulsante “Aggiungi”.

3. Scrivere uno script che:

   • Legga il valore dell’input

   • Crei un nuovo elemento <li> con il testo inserito

   • Lo aggiunga alla lista

   • Permetta di rimuovere un elemento cliccandoci sopra

Esempio di soluzione:

<input type="text" id="taskInput" placeholder="Nuovo compito">
<button id="addBtn">Aggiungi</button>
<ul id="taskList"></ul>

<script>
const input = document.getElementById("taskInput");
const button = document.getElementById("addBtn");
const list = document.getElementById("taskList");

button.addEventListener("click", () => {
  if(input.value.trim() !== ""){
    let li = document.createElement("li");
    li.textContent = input.value;
    li.addEventListener("click", () => li.remove());
    list.appendChild(li);
    input.value = "";
  }
});
</script>