Lo scopo di questo post sul blog è di chiarire un po’ di confusione quando si usa l’attributo data in Javascript. Come studente di ingegneria del software, a volte il mondo del bootcamp e il mondo reale sembrano strettamente collegati, ma distanti galassie. Durante una delle nostre lezioni stavamo modificando le classi e aggiungendo direttamente gli id all’html e uno studente ha detto che non era particolarmente saggio modificare questa roba perché il team di progettazione potrebbe avere dei problemi.

Questo aveva completamente senso. Entra, HTMLElement.dataset. La proprietà dataset fornisce ai programmatori JS la possibilità di leggere/scrivere attributi personalizzati su un elemento. Il vantaggio è che è accessibile nel DOM così come in HTML.

La parte confusa di questo è che un data-attribute HTML e la sua corrispondente proprietà dataset.DOM non condividono lo stesso nome. Ecco cosa ho trovato leggendo sul sito MDN.

Questo è il punto in cui si verifica la maggior parte dei problemi. Come nuovo programmatore JS, ho pensato che questo fosse particolarmente utile per impostare gli attributi agli elementi mentre si aggiungono gli ascoltatori di eventi. Una parola di cautela: Sono ancora uno studente e questa potrebbe non essere la migliore pratica, ma almeno non stavo andando a modificare l’HTML esistente.

Quindi, dopo aver letto le regole di denominazione per questo argomento, possiamo andare avanti con le cose utili, accedere e impostare i valori, seguiti da alcuni esempi.

L’accesso ai valori, secondo me, ci dà più opzioni di manipolazione, rispetto alla semplice chiamata al className o all’id. Questo è potente perché non dobbiamo preoccuparci se il team di progettazione arriverà un giorno e dirà, indovina un po’, abbiamo rinominato tutte le nostre classi. Ecco alcuni esempi della sintassi:

Ecco un esempio che dà Mozilla:

E per i miei compagni di coorte “compagni”.” Questo dovrebbe davvero colpire nel segno. Con la nostra programmazione a coppie Toyland, ecco come l’abbiamo usata io e Alex:

Dopo aver parlato con un amico che sta imparando React, quello che scopriremo, se state leggendo questo codice, è che .innerText è un metodo IE, e dovremmo usare .textContent, ma questo è per un altro post.

Con la quantità di tempo che passiamo ad imparare nuovo materiale, a volte aspetti importanti sfuggono. Una volta arrivata la settimana del progetto, credo che diventeremo tutti molto più bravi ad utilizzare questi strumenti personalizzati per manipolare il DOM e scrivere codice pulito. Spero vi sia piaciuta la lettura!