A blogbejegyzés célja, hogy tisztázzon néhány zavart a data attribútum Javascriptben történő használatakor. Szoftverfejlesztő hallgatóként néha úgy tűnik, hogy a bootcamp világa és a való világ szorosan összefügg, mégis galaxisok választják el egymástól. Az egyik előadásunk során osztályokat módosítottunk és azonosítókat adtunk hozzá közvetlenül a html-hez, és az egyik hallgató megemlítette, hogy nem különösebben bölcs dolog ezeket a dolgokat módosítani, mert a tervezőcsapatnak problémái lehetnek.

Ez teljesen logikus volt. Enter, HTMLElement.dataset. A dataset tulajdonság lehetővé teszi a JS programozók számára, hogy egyéni attribútumokat olvassanak/írjanak egy elemre. Ennek előnye, hogy a DOM-ban és a HTML-ben is elérhető.

Az a zavaró része ennek, hogy egy HTML data-attribútum és a hozzá tartozó DOM dataset.property nem azonos nevű. A következőket találtam az MDN weboldalon olvasva.

Ez az, ahol a legtöbb probléma felmerül. Mint kezdő JS programozó, úgy gondoltam, hogy ez különösen hasznos lehet az elemek attribútumainak beállításához, miközben eseményhallgatókat adunk hozzá. Óvatosságra intő szó: Még tanuló vagyok, és lehet, hogy ez nem a legjobb gyakorlat, de legalább nem mentem bele és nem módosítottam a meglévő HTML-t.

Azt követően tehát, hogy végigolvastuk a téma elnevezési szabályait, jöhetnek a hasznos dolgok, az értékek elérése és beállítása, majd néhány példa.

Az értékekhez való hozzáférés véleményem szerint több lehetőséget ad a manipulációra, szemben a className vagy az id egyszerű meghívásával. Ez azért erős, mert nem kell aggódnunk, hogy a tervezőcsapat egy nap bejön-e, és azt mondja, hogy képzeld, átneveztük az összes osztályunkat. Íme néhány példa a szintaxisra:

Itt egy példa, amit a Mozilla ad:

És a társaimnak a cohort “társak.” Ez a mostani tényleg meg kell, hogy üssön. A Toyland páros programozásunkkal Alex és én így használtuk:

Az egyik barátommal beszélgetve, aki most tanulja a Reactot, arra fogunk rájönni, hogy ha végigolvassuk ezt a kódot, hogy .innerText egy IE metódus, és nekünk a .textContent-et kellene használnunk, de ez egy másik bejegyzéshez tartozik.

Amennyi időt töltünk új anyagok tanulásával, néha fontos szempontok csúsznak ki a fejünkből. Amint eljön a projekthét, úgy gondolom, hogy mindannyian sokkal jobban fogjuk tudni használni ezeket az egyéni eszközöket a DOM manipulálásához és a tiszta kód írásához. Remélem, élveztétek az olvasást!