🌐 Lezione 9: DOM Manipulation – Parte 1

Impara a selezionare e manipolare elementi HTML con JavaScript

Cos’è il DOM?

Il Document Object Model (DOM) è una rappresentazione ad albero della struttura HTML di una pagina web. JavaScript può interagire con il DOM per modificare contenuti, stili e struttura della pagina.

Selezione Elementi nel DOM

js
// Selezionare elementi singoli
const titolo = document.getElementById('titolo'); 
const primoBottone = document.querySelector('.btn-primary'); 
const form = document.querySelector('form.login');

// Selezionare gruppi di elementi
const paragrafi = document.getElementsByTagName('p'); 
const elementi = document.getElementsByClassName('item'); 
const campiInput = document.querySelectorAll('input[type="text"]');

// Navigare nel DOM
const genitore = titolo.parentElement; 
const primoFiglio = genitore.firstElementChild; 
const prossimoElemento = titolo.nextElementSibling; 
const elementoPrecedente = titolo.previousElementSibling;

Modificare il Contenuto

js
// Cambiare il testo
titolo.textContent = "Nuovo titolo"; // Solo testo
titolo.innerHTML = "Titolo con <em>enfasi</em>"; // HTML

// Modificare attributi
const immagine = document.querySelector('img'); 
immagine.src = "nuova-immagine.jpg";
immagine.alt = "Descrizione alternativa";

// Verificare e ottenere attributi
const href = document.querySelector('a').getAttribute('href');
const hasClass = titolo.hasAttribute('class');

// Gestire classi CSS
titolo.classList.add("evidenziato");
titolo.classList.remove('nascosto');
titolo.classList.toggle('attivo'); // Aggiunge se assente, rimuove se presente
titolo.classList.replace('vecchia-classe', 'nuova-classe');

Creare e Inserire Elementi

js
// Creare nuovi elementi
const nuovoParagrafo = document.createElement('p');
nuovoParagrafo.textContent = "Questo è un nuovo paragrafo";

// Aggiungere agli elementi esistenti
document.body.appendChild(nuovoParagrafo); // in fondo
document.body.prepend(nuovoParagrafo); // all'inizio

// Inserire in posizioni specifiche
const riferimento = document.querySelector('.riferimento');
riferimento.before(nuovoParagrafo); // Prima del riferimento
riferimento.after(nuovoParagrafo); // Dopo il riferimento

// Rimuovere elementi
nuovoParagrafo.remove(); // Rimuove l'elemento
// Alternativa vecchio stile:
nuovoParagrafo.parentElement.removeChild(nuovoParagrafo);

Modificare Stili CSS

js
// Stili inline
titolo.style.color = "blue";
titolo.style.fontSize = "24px";
titolo.style.fontWeight = "bold";
titolo.style.backgroundColor = "lightgray";

// Ottenere stili calcolati
const stili = window.getComputedStyle(titolo);
console.log(stili.color);
console.log(stili.fontSize);

// Modificare visibilità
elemento.style.display = "none"; // Nasconde
elemento.style.display = "block"; // Mostra
elemento.style.visibility = "hidden"; // Nasconde ma mantiene lo spazio

🎯 Esercizio Pratico: Gestione Lista Dinamica

Obiettivo: Crea una lista dinamica dove aggiungere e rimuovere elementi

html + js
<!-- HTML -->
<div id="app">
    <input type="text" id="itemInput" placeholder="Inserisci un elemento">
    <button onclick="aggiungiItem()">Aggiungi</button>
    <ul id="lista"></ul>
</div>

<script>
function aggiungiItem() {
    const input = document.getElementById('itemInput');
    const testo = input.value.trim();
    
    if (testo === '') {
        alert('Inserisci un testo!');
        return;
    }
    
    const lista = document.getElementById('lista');
    const nuovoItem = document.createElement('li');
    
    nuovoItem.innerHTML = `
        ${testo}
        <button onclick="rimuoviItem(this)">Rimuovi</button>
    `;
    
    lista.appendChild(nuovoItem);
    input.value = ''; // Pulisci l'input
    input.focus(); // Rimetti il focus sull'input
}

function rimuoviItem(bottone) {
    const item = bottone.parentElement;
    item.remove();
}

// Inizializza con alcuni elementi
document.addEventListener('DOMContentLoaded', function() {
    const elementiIniziali = ['Pane', 'Latte', 'Uova'];
    const lista = document.getElementById('lista');
    
    elementiIniziali.forEach(item => {
        const li = document.createElement('li');
        li.innerHTML = `
            ${item}
            <button onclick="rimuoviItem(this)">Rimuovi</button>
        `;
        lista.appendChild(li);
    });
});
</script>

Sfida avanzata: Aggiungi queste funzionalità:

  1. Contatore che mostra quanti elementi ci sono nella lista
  2. Pulsante per cancellare tutta la lista
  3. Possibilità di modificare gli elementi esistenti
  4. Salvataggio della lista nel localStorage

Torna in alto