DOM: Modificare Elementi

<h1 id="titolo">Benvenuto</h1>
<p id="descrizione">Questo è un <strong>paragrafo</strong></p>

const titolo = document.querySelector('#titolo');
const descrizione = document.querySelector('#descrizione');

// Leggere textContent
console.log(titolo.textContent);  // "Benvenuto"
console.log(descrizione.textContent);  // "Questo è un paragrafo"
// Nota: rimuove i tag HTML!

// Scrivere textContent
titolo.textContent = "Ciao Mondo!";
// Risultato: <h1 id="titolo">Ciao Mondo!</h1>

descrizione.textContent = "Nuovo testo semplice";
// Risultato: <p id="descrizione">Nuovo testo semplice</p>
// I tag <strong> sono stati rimossi!

// Se provi a inserire HTML, viene trattato come testo
titolo.textContent = "Testo con <strong>grassetto</strong>";
// Risultato: Testo con <strong>grassetto</strong> (visibile come testo!)

const descrizione = document.querySelector('#descrizione');

// Leggere innerHTML
console.log(descrizione.innerHTML);
// "Questo è un <strong>paragrafo</strong>"

// Scrivere innerHTML con HTML
descrizione.innerHTML = "Testo con <strong>grassetto</strong>";
// Risultato: HTML viene interpretato!
// <p>Testo con <strong>grassetto</strong></p>

// Creare strutture complesse
const container = document.querySelector('#container');
container.innerHTML = `
    <h2>Titolo</h2>
    <p>Paragrafo 1</p>
    <p>Paragrafo 2</p>
    <button>Clicca</button>
`;

// Aggiungere in append (+=)
const lista = document.querySelector('#lista');
lista.innerHTML += "<li>Nuovo elemento</li>";

// Svuotare elemento
container.innerHTML = "";  // Rimuove tutto il contenuto

<div id="box">Box</div>

const box = document.querySelector('#box');

// Modificare singole proprietà
box.style.color = "red";
box.style.backgroundColor = "yellow";  // Nota: camelCase!
box.style.fontSize = "20px";
box.style.padding = "10px";
box.style.border = "2px solid black";
box.style.borderRadius = "5px";

// Proprietà con più parole → camelCase
box.style.marginTop = "20px";          // margin-top
box.style.textAlign = "center";        // text-align
box.style.fontWeight = "bold";         // font-weight

// Con unità di misura
box.style.width = "200px";
box.style.height = "100px";

// Leggere stile
console.log(box.style.color);          // "red"
console.log(box.style.backgroundColor); // "yellow"

// Rimuovere stile
box.style.color = "";  // Rimuove lo stile inline

// Risultato HTML:
// <div id="box" style="background-color: yellow; font-size: 20px; ...">

const box = document.querySelector('#box');

// Impostare più stili insieme
box.style.cssText = `
    color: white;
    background-color: blue;
    padding: 20px;
    border-radius: 10px;
    font-size: 18px;
`;

// Oppure inline
box.style.cssText = "color: red; font-size: 24px; padding: 10px;";

// ⚠️ cssText SOVRASCRIVE tutti gli stili precedenti!

<style>
    .box {
        width: 200px;
        height: 100px;
        background: blue;
    }
</style>

<div class="box" style="color: red;"></div>

// JavaScript
const box = document.querySelector('.box');

// style legge SOLO inline
console.log(box.style.width);       // "" (vuoto!)
console.log(box.style.color);       // "red" (inline)

// getComputedStyle legge TUTTO
const styles = window.getComputedStyle(box);
console.log(styles.width);          // "200px"
console.log(styles.height);         // "100px"
console.log(styles.backgroundColor); // "rgb(0, 0, 255)"
console.log(styles.color);          // "rgb(255, 0, 0)"

// Proprietà specifiche
console.log(styles.getPropertyValue('width'));  // "200px"

<div id="box" class="container highlight">Box</div>

const box = document.querySelector('#box');

// add() - Aggiungi classe
box.classList.add('active');
// Risultato: class="container highlight active"

// Aggiungi più classi insieme
box.classList.add('visible', 'important');
// Risultato: class="container highlight active visible important"

// remove() - Rimuovi classe
box.classList.remove('highlight');
// Risultato: class="container active visible important"

// Rimuovi più classi
box.classList.remove('visible', 'important');

// toggle() - Aggiungi se non c'è, rimuovi se c'è
box.classList.toggle('active');  // Rimuove (c'era)
box.classList.toggle('active');  // Aggiunge (non c'era)

// toggle() con condizione (opzionale)
const isLoggedIn = true;
box.classList.toggle('logged-in', isLoggedIn);  // Aggiunge
box.classList.toggle('logged-in', !isLoggedIn); // Rimuove

// contains() - Verifica se ha classe
if (box.classList.contains('container')) {
    console.log("Ha la classe container");
}

// replace() - Sostituisci classe
box.classList.replace('container', 'wrapper');
// Da: class="container ..."
// A:  class="wrapper ..."

// Numero di classi
console.log(box.classList.length);  // 2

// Lista classi (iterabile)
box.classList.forEach(classe => {
    console.log(classe);
});

const elemento = document.querySelector('#elemento');

// ❌ VECCHIO MODO - className (stringa)
console.log(elemento.className);  // "container highlight active"

// Aggiungere classe (scomodo!)
elemento.className += " nuova-classe";  // Spazio importante!

// Rimuovere classe (difficile!)
elemento.className = elemento.className.replace('highlight', '');

// ✅ NUOVO MODO - classList (API moderna)
console.log(elemento.classList);  // DOMTokenList

elemento.classList.add('nuova-classe');     // Facile!
elemento.classList.remove('highlight');     // Facile!
elemento.classList.toggle('active');        // Facile!

// classList è MOLTO più comodo! 🌟

// Toggle menu mobile
const menuBtn = document.querySelector('#menu-btn');
const nav = document.querySelector('nav');

menuBtn.addEventListener('click', () => {
    nav.classList.toggle('open');
});

// Tema dark/light
const themeBtn = document.querySelector('#theme-btn');
const body = document.body;

themeBtn.addEventListener('click', () => {
    body.classList.toggle('dark-theme');
    
    // Salva preferenza
    const isDark = body.classList.contains('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// Tabs attivi
const tabs = document.querySelectorAll('.tab');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        // Rimuovi active da tutti
        tabs.forEach(t => t.classList.remove('active'));
        
        // Aggiungi active al cliccato
        tab.classList.add('active');
    });
});

// Animazioni on scroll
const cards = document.querySelectorAll('.card');

window.addEventListener('scroll', () => {
    cards.forEach(card => {
        const rect = card.getBoundingClientRect();
        
        if (rect.top < window.innerHeight) {
            card.classList.add('visible');
        } else {
            card.classList.remove('visible');
        }
    });
});

<img id="foto" src="old.jpg" alt="Vecchia foto">
<a id="link" href="https://example.com">Link</a>
<button id="btn" disabled>Bottone</button>
<div id="box" data-id="123" data-category="tech"></div>

const foto = document.querySelector('#foto');
const link = document.querySelector('#link');
const btn = document.querySelector('#btn');
const box = document.querySelector('#box');

// getAttribute() - Leggi attributo
console.log(foto.getAttribute('src'));  // "old.jpg"
console.log(foto.getAttribute('alt'));  // "Vecchia foto"
console.log(link.getAttribute('href')); // "https://example.com"

// setAttribute() - Imposta attributo
foto.setAttribute('src', 'new.jpg');
foto.setAttribute('alt', 'Nuova foto');
link.setAttribute('href', 'https://google.com');
link.setAttribute('target', '_blank');

// removeAttribute() - Rimuovi attributo
btn.removeAttribute('disabled');  // Ora cliccabile!

// hasAttribute() - Verifica esistenza
if (foto.hasAttribute('alt')) {
    console.log("Ha attributo alt");
}

// Attributi booleani (disabled, checked, required...)
btn.disabled = true;   // Aggiungi disabled
btn.disabled = false;  // Rimuovi disabled

const checkbox = document.querySelector('#check');
checkbox.checked = true;  // Seleziona checkbox

// HTML
<div id="prodotto" 
     data-id="123" 
     data-price="99.99" 
     data-category="electronics"
     data-in-stock="true">
</div>

// JavaScript - Metodo 1: getAttribute
const prodotto = document.querySelector('#prodotto');

console.log(prodotto.getAttribute('data-id'));       // "123"
console.log(prodotto.getAttribute('data-price'));    // "99.99"

// JavaScript - Metodo 2: dataset (CONSIGLIATO! 🌟)
console.log(prodotto.dataset.id);        // "123"
console.log(prodotto.dataset.price);     // "99.99"
console.log(prodotto.dataset.category);  // "electronics"
console.log(prodotto.dataset.inStock);   // "true" (camelCase!)

// Impostare data attribute
prodotto.dataset.id = "456";
prodotto.dataset.newAttribute = "valore";
// Risultato: data-new-attribute="valore"

// Rimuovere data attribute
delete prodotto.dataset.category;

// Uso pratico: associare dati agli elementi
const cards = document.querySelectorAll('.product-card');

cards.forEach(card => {
    card.addEventListener('click', () => {
        const productId = card.dataset.id;
        const price = parseFloat(card.dataset.price);
        
        console.log(`Prodotto ${productId} costa €${price}`);
        // Chiamata API, aggiungi al carrello, ecc.
    });
});

<input id="nome" type="text" value="Mario">

const input = document.querySelector('#nome');

// ATTRIBUTO (HTML) - valore iniziale
console.log(input.getAttribute('value'));  // "Mario"

// PROPRIETÀ (DOM) - valore corrente
console.log(input.value);  // "Mario"

// Utente cambia input in "Luigi"

console.log(input.getAttribute('value'));  // "Mario" (non cambia!)
console.log(input.value);                  // "Luigi" (aggiornato!)

// Attributo = stato iniziale
// Proprietà = stato corrente

// Per questo SPESSO usi proprietà:
input.value = "Anna";              // Cambia valore
input.checked = true;              // Checkbox
input.disabled = true;             // Disabilita

// Invece di:
input.setAttribute('value', 'Anna');  // Meno usato

// Crea nuovo elemento
const nuovoDiv = document.createElement('div');
const nuovoP = document.createElement('p');
const nuovoBtn = document.createElement('button');

// Imposta contenuto
nuovoDiv.textContent = "Sono un div nuovo!";
nuovoP.textContent = "Paragrafo creato dinamicamente";
nuovoBtn.textContent = "Clicca";

// Imposta attributi
nuovoDiv.id = "nuovo-div";
nuovoDiv.className = "box highlight";
nuovoBtn.type = "button";

// Imposta stile
nuovoDiv.style.color = "blue";
nuovoDiv.style.padding = "10px";

// Aggiungi classi
nuovoP.classList.add('testo', 'importante');

// Data attributes
nuovoBtn.dataset.action = "submit";

// L'elemento è creato MA non ancora visibile!
// Devi aggiungerlo al DOM...

const container = document.querySelector('#container');
const nuovoElemento = document.createElement('div');
nuovoElemento.textContent = "Nuovo!";

// append() - Aggiunge ALLA FINE (moderno) 🌟
container.append(nuovoElemento);

// prepend() - Aggiunge ALL'INIZIO (moderno) 🌟
container.prepend(nuovoElemento);

// appendChild() - Aggiunge alla fine (classico)
container.appendChild(nuovoElemento);

// Differenza append vs appendChild:
// append() può aggiungere più elementi e anche stringhe
container.append(elemento1, elemento2, "testo");

// appendChild() solo UN elemento DOM
container.appendChild(elemento1);

// before() - Inserisci PRIMA dell'elemento
const riferimento = document.querySelector('#rif');
nuovoElemento.before(riferimento);

// after() - Inserisci DOPO l'elemento
riferimento.after(nuovoElemento);

// insertBefore() - Classico (più complicato)
const parent = riferimento.parentElement;
parent.insertBefore(nuovoElemento, riferimento);

function creaCardProdotto(prodotto) {
    // Crea elementi
    const card = document.createElement('div');
    const img = document.createElement('img');
    const titolo = document.createElement('h3');
    const descrizione = document.createElement('p');
    const prezzo = document.createElement('div');
    const button = document.createElement('button');
    
    // Imposta classi
    card.className = 'product-card';
    prezzo.className = 'price';
    button.className = 'btn btn-primary';
    
    // Imposta contenuto
    img.src = prodotto.immagine;
    img.alt = prodotto.nome;
    titolo.textContent = prodotto.nome;
    descrizione.textContent = prodotto.descrizione;
    prezzo.textContent = `€${prodotto.prezzo.toFixed(2)}`;
    button.textContent = "Aggiungi al carrello";
    
    // Data attributes
    card.dataset.id = prodotto.id;
    card.dataset.category = prodotto.categoria;
    
    // Aggiungi event listener
    button.addEventListener('click', () => {
        console.log(`Aggiunto: ${prodotto.nome}`);
    });
    
    // Assembla card
    card.append(img, titolo, descrizione, prezzo, button);
    
    return card;
}

// Uso
const prodotto = {
    id: 1,
    nome: "Laptop",
    descrizione: "Laptop potente",
    prezzo: 999,
    immagine: "laptop.jpg",
    categoria: "elettronica"
};

const card = creaCardProdotto(prodotto);
document.querySelector('#prodotti').append(card);

const elemento = document.querySelector('#da-rimuovere');

// remove() - Rimuove l'elemento (moderno) 🌟
elemento.remove();

// removeChild() - Rimuove figlio (classico)
const parent = elemento.parentElement;
parent.removeChild(elemento);

// Svuotare contenitore (rimuove tutti i figli)
const container = document.querySelector('#container');

// Metodo 1: innerHTML
container.innerHTML = "";

// Metodo 2: Loop children
while (container.firstChild) {
    container.removeChild(container.firstChild);
}

// Metodo 3: replaceChildren (moderno)
container.replaceChildren();

// Rimuovere elementi che matchano selettore
const daRimuovere = document.querySelectorAll('.temporary');
daRimuovere.forEach(el => el.remove());

// Rimuovere con conferma
const btn = document.querySelector('#delete-btn');
btn.addEventListener('click', () => {
    if (confirm('Sicuro di voler eliminare?')) {
        elemento.remove();
    }
});