cat javascript/cambiare-testo-classi-e-attributi.md

Lezione 28 12 min

Cambiare testo, classi e attributi

Modificare un elemento già presente nella pagina.

In parole semplici

Dopo aver selezionato un elemento puoi cambiare il testo, aggiungere una classe CSS o modificare un attributo.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

  • textContent: proprietà per cambiare il testo.
  • classList: strumento per aggiungere o togliere classi CSS.

Cosa impari

  • Capire il concetto senza partire da definizioni astratte.
  • Vedere un esempio piccolo che puoi copiare e modificare.
  • Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

<p id="stato">In attesa</p>

<script>
  const stato = document.querySelector("#stato");
  stato.textContent = "Pronto";
  stato.classList.add("attivo");
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

  1. Crea un paragrafo con testo iniziale.
  2. Selezionalo.
  3. Cambia il testo con textContent.
  4. Aggiungi una classe con classList.add.
  5. Controlla il risultato nella pagina.

Controllo finale

Hai finito quando riesci a modificare un elemento senza toccare l’HTML iniziale.