Scopul acestei postări pe blog este de a clarifica unele confuzii atunci când se utilizează atributul data în Javascript. În calitate de student la inginerie software, uneori lumea de bootcamp și lumea reală par strâns legate între ele, dar la distanță de galaxii. În timpul unuia dintre cursurile noastre, modificam clasele și adăugam direct id-uri în html și un student a menționat că nu este deosebit de înțelept să modificăm aceste lucruri deoarece echipa de proiectare ar putea avea probleme.

Acest lucru a avut sens total. Intră, HTMLElement.dataset. Proprietatea dataset oferă programatorilor JS posibilitatea de a citi/scrie atribute personalizate pe un element. Avantajul este că aceasta este accesibilă atât în DOM, cât și în HTML.

Partea confuză a acestui lucru este că un atribut de date HTML și proprietatea corespunzătoare DOM dataset.property nu au același nume. Iată ce am găsit în timp ce citeam pe site-ul MDN.

Acesta este locul în care apar cele mai multe probleme. În calitate de nou programator JS, am considerat că acest lucru este deosebit de util pentru a seta atributele elementelor în timp ce se adaugă ascultători de evenimente. Un cuvânt de precauție: Sunt încă student și s-ar putea ca aceasta să nu fie cea mai bună practică, dar cel puțin nu am intrat și am modificat HTML-ul existent.

Așa că, după ce am citit regulile de denumire pentru acest subiect, putem trece mai departe cu lucrurile utile, accesarea și setarea valorilor, urmate de câteva exemple.

Accesul la valori, în opinia mea, ne oferă mai multe opțiuni de manipulare, spre deosebire de a apela doar la className sau la id. Acest lucru este puternic, deoarece nu trebuie să ne facem griji dacă echipa de proiectare va veni într-o zi și va spune, ghici ce, am redenumit toate clasele noastre. Iată câteva exemple de sintaxă:

Iată un exemplu dat de Mozilla:

Și pentru colegii mei de cohortă „mates”.” Asta chiar ar trebui să dea lovitura. Cu Toyland-ul nostru de programare în perechi, iată cum l-am folosit eu și Alex:

După ce am discutat cu un prieten care învață acum React, ceea ce vom ajunge să aflăm, dacă citiți acest cod, este că .innerText este o metodă IE, iar noi ar trebui să folosim .textContent, dar asta este pentru o altă postare.

Cu tot timpul pe care îl petrecem învățând un material nou, uneori aspecte importante ne scapă printre degete. Odată ce săptămâna proiectului ajunge aici, cred că vom deveni cu toții mult mai buni în utilizarea acestor instrumente personalizate pentru a manipula DOM și a scrie cod curat. Sper că v-ați bucurat de lectură!

.