Web e sviluppo

JavaScript: Manipolazione DOM

Selezionare, modificare, creare elementi HTML con vanilla JS

A cosa serve

Spiega come JavaScript modifica il DOM: selezionare elementi, cambiare testo/classi, gestire eventi e creare interazioni semplici.

Prima di iniziare

  • Prepara HTML ordinato con id o classi chiare.
  • Collega lo script alla fine del body o usa DOMContentLoaded.
  • Apri Console per vedere errori.

Procedura passo passo

  1. Seleziona elementi con querySelector.
  2. Leggi e modifica textContent, classList e attributi.
  3. Aggiungi eventi con addEventListener.
  4. Crea funzioni piccole e leggibili.
  5. Testa casi vuoti o elementi mancanti.

Controlli finali

  • La console non mostra errori.
  • I pulsanti rispondono al click.
  • L'interazione funziona anche dopo refresh.

Errori comuni

  • Usare script prima che il DOM esista.
  • Manipolare innerHTML con dati non sicuri.
  • Creare codice duplicato invece di funzioni.

Quando chiedere aiuto

Se la guida riguarda un PC di lavoro, un sito online, un dominio, caselle email, DNS, hosting Plesk o dati importanti, e meglio fare un controllo guidato. Posso verificare la configurazione, applicare la soluzione e lasciarti una situazione ordinata.

Fonti utili