Selezione e modifica dei contenuti

Vediamo come selezionare gli elementi del DOM e aggiornare i loro contenuti. Si può agire sul testo con textContent oppure modificare il contenuto HTML con innerHTML.

Codice Esempio: Modifica del testo

CODE: Javascript

1. let titolo = document.getElementById("titolo");

2. titolo.textContent = "Nuovo Titolo";   // cambia solo il testo

3. titolo.innerHTML = "<em>Titolo in corsivo</em>"; // interpreta HTML

Aggiunta e rimozione di elementi

Analizziamo come creare nuovi nodi e inserirli nella pagina. È possibile anche rimuovere un nodo già esistente.

Codice Esempio: Creazione e rimozione

CODE: Javascript

1. let lista = document.getElementById("lista");

2. let nuovoElemento = document.createElement("li");

3. nuovoElemento.textContent = "Nuovo elemento";

4. lista.appendChild(nuovoElemento);   // aggiunge in fondo

5. lista.removeChild(lista.firstChild); // rimuove il primo elemento

Manipolazione degli stili

Vediamo come modificare gli stili degli elementi. Si può agire direttamente sulle proprietà CSS tramite style oppure gestire le classi con classList.

Codice Esempio: Modifica degli stili

CODE: Javascript

1. let paragrafo = document.querySelector("p");

2. paragrafo.style.color = "blue";           // stile diretto

3. paragrafo.classList.add("evidenziato");   // aggiunge classe CSS

4. paragrafo.classList.remove("grigio");     // rimuove classe CSS

Tabella riassuntiva

Considerazioni

Distinguere tra testo semplice e HTML interpretato è fondamentale. Per strutture dinamiche conviene creare nodi con JavaScript. Per gli stili, usare classi mantiene il codice più ordinato rispetto alle modifiche inline.