Celem tego wpisu na blogu jest wyjaśnienie pewnych nieporozumień podczas używania atrybutu data w Javascript. Jako student inżynierii oprogramowania, czasami świat bootcampów i prawdziwy świat wydają się ściśle powiązane, ale galaktyki od siebie. Podczas jednego z naszych wykładów modyfikowaliśmy klasy i dodawaliśmy idy do html bezpośrednio i jeden student wspomniał, że nie było szczególnie mądre modyfikowanie tych rzeczy, ponieważ zespół projektowy może mieć problemy.

To miało całkowity sens. Wprowadź, HTMLElement.dataset. Właściwość dataset zapewnia programistom JS możliwość odczytu / zapisu niestandardowych atrybutów na elemencie. Zaletą jest to, że jest on dostępny w DOM, jak również w HTML.

Zagmatwaną częścią tego jest to, że atrybut danych HTML i jego odpowiednik DOM dataset.property nie mają tej samej nazwy. Oto, co znalazłem podczas czytania na stronie MDN.

To właśnie tutaj pojawia się większość problemów. Jako nowy programista JS, pomyślałem, że jest to szczególnie przydatne do ustawiania atrybutów do elementów podczas dodawania słuchaczy zdarzeń. Słowo ostrzeżenia: Nadal jestem studentem i może to nie być najlepsza praktyka, ale przynajmniej nie wchodziłem i nie modyfikowałem istniejącego HTML.

Więc po zapoznaniu się z zasadami nazewnictwa dla tego tematu, możemy następnie przejść do przodu z przydatnymi rzeczami, dostępem i ustawianiem wartości, a następnie kilkoma przykładami.

Dostęp do wartości, moim zdaniem, daje nam więcej możliwości manipulacji, w przeciwieństwie do zwykłego wywołania className lub id. Jest to potężne, ponieważ nie musimy się martwić, czy zespół projektowy przyjdzie pewnego dnia i powie, zgadnij co, zmieniliśmy nazwy wszystkich naszych klas. Oto kilka przykładów składni:

Oto przykład, który podaje Mozilla:

A dla kolegów z kohorty „koledzy.” Ten powinien naprawdę trafić do domu. Z naszym programowaniem parami Toyland, tak Alex i ja użyliśmy go:

Po rozmowie z przyjacielem, który teraz uczy się React, to, co dojdziemy do odkrycia, jeśli czytasz przez ten kod, to to, że .innerText jest metodą IE, a my powinniśmy używać .textContent, ale to już temat na inny wpis.

Przy takiej ilości czasu, jaką poświęcamy na naukę nowego materiału, czasami ważne aspekty umykają uwadze. Wierzę, że gdy nadejdzie tydzień projektu, wszyscy staniemy się o wiele lepsi w wykorzystywaniu tych niestandardowych narzędzi do manipulowania DOM i pisania czystego kodu. Mam nadzieję, że podobało ci się czytanie!