Accedere a data-* con dataset in JavaScript
Leggere e scrivere attributi data personalizzati tramite l’API dataset
Accedere a data-* con dataset in JavaScript è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è l'API dataset?
Ogni elemento HTML espone i propri attributi data-* tramite la proprietà dataset — una DOMStringMap che associa i nomi degli attributi ai valori senza richiedere chiamate a getAttribute().
Corrispondenza tra attributi e proprietà
data-user-id diventa el.dataset.userId. I trattini nei nomi degli attributi vengono convertiti in camelCase nella proprietà dataset. Per accedere a data-item-count si utilizza el.dataset.itemCount.
Lettura dei valori
Legga un attributo data: const id = el.dataset.userId. Tutti i valori di dataset sono stringhe — converta i valori numerici con Number() o parseInt() secondo necessità. Gli attributi non definiti restituiscono undefined, non null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Scrittura dei valori
Imposti un attributo data tramite dataset: el.dataset.state = "active". In questo modo crea o aggiorna l'attributo HTML data-state. La modifica dell'attributo si riflette immediatamente nel DOM e può essere osservata da MutationObserver.
Eliminazione dei valori
Elimini un attributo data: delete el.dataset.userId. L'attributo data-user-id corrispondente viene rimosso dall'elemento. Per una rimozione esplicita può anche utilizzare el.removeAttribute("data-user-id").
Iterazione su dataset
dataset è una DOMStringMap — la iteri con un ciclo for...in oppure la espanda in Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). È utile per leggere in batch tutti gli attributi data di un elemento.
Uso di dataset per lo stato dei componenti
Memorizzi lo stato leggero del componente negli attributi data anziché in input nascosti o variabili JavaScript. Un componente a schede memorizza l'indice della scheda attiva in data-active-tab nel contenitore, leggibile da qualsiasi script senza una variabile condivisa.
Delegazione degli eventi con dataset
In un elenco di elementi, colleghi un solo listener per i clic al contenitore. Al clic, legga il dataset del target selezionato: e.target.closest("[data-id]").dataset.id. Un solo listener gestisce tutti gli elementi senza il sovraccarico dell'associazione per elemento.
dataset vs proprietà personalizzate
Utilizzi dataset per i dati che devono essere leggibili dall'HTML (metadati renderizzati dal server, accessibili ai selettori CSS). Utilizzi variabili JavaScript per lo stato temporaneo in fase di esecuzione che non deve essere visibile nell'HTML. Usarli entrambi aggiunge complessità inutile.
Attenzione alla conversione dei tipi
dataset restituisce sempre stringhe. el.dataset.active === true è sempre falso — confronti con el.dataset.active === "true" oppure esegua una conversione: el.dataset.active === "true". Lo stato booleano memorizzato in dataset richiede un confronto tra stringhe.
dataset vs getAttribute
Entrambi leggono gli attributi data. dataset è più pratico per l'accesso in camelCase; getAttribute richiede il nome completo dell'attributo, incluso il prefisso "data-". Nei progetti moderni, preferisca dataset; utilizzi getAttribute quando itera sugli attributi non-data insieme agli attributi data.
Verifica delle conoscenze
In che modo l'attributo HTML data-user-id compare nell'oggetto dataset JavaScript?
Riepilogo
L'API dataset associa gli attributi data-* a proprietà JavaScript in camelCase per consentire facilmente operazioni di lettura, scrittura ed eliminazione. Permette di memorizzare lo stato dei componenti, utilizzare pattern di delegazione degli eventi e trasferire dati dal server al client senza input nascosti o variabili globali.
Domande Frequenti
La lezione «Accedere a data-* con dataset in JavaScript» è gratuita?
Sì — il testo completo di «Accedere a data-* con dataset in JavaScript» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Accedere a data-* con dataset in JavaScript»?
Leggere e scrivere attributi data personalizzati tramite l’API dataset Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Accedere a data-* con dataset in JavaScript»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Sintassi di data-* e convenzioni di denominazione
- Accedere a data-* con dataset in JavaScript
- Usare data-* con i selettori di attributo CSS
- Pattern pratici: tooltip e monitoraggio dello stato