Der Zweck dieses Blog-Beitrags ist es, einige Verwirrungen bei der Verwendung des data-Attributs in Javascript zu klären. Als Software-Engineering-Student scheinen die Welt des Bootcamps und die reale Welt manchmal eng miteinander verbunden zu sein und doch Galaxien voneinander entfernt. Während einer unserer Vorlesungen änderten wir Klassen und fügten ids direkt in HTML ein, und ein Student erwähnte, dass es nicht besonders klug sei, diese Dinge zu ändern, weil das Designteam Probleme haben könnte.

Das machte absolut Sinn. Hier kommt HTMLElement.dataset ins Spiel. Die Eigenschaft dataset bietet JS-Programmierern die Möglichkeit, benutzerdefinierte Attribute für ein Element zu lesen und zu schreiben. Der Vorteil ist, dass sowohl im DOM als auch in HTML darauf zugegriffen werden kann.

Das Verwirrende daran ist, dass ein HTML-Datenattribut und die entsprechende DOM-Eigenschaft dataset.property nicht denselben Namen haben. Das habe ich beim Nachlesen auf der MDN-Website herausgefunden.

Hier kommen die meisten Probleme ins Spiel. Als neuer JS-Programmierer hielt ich dies für besonders nützlich, um Attribute für Elemente zu setzen und gleichzeitig Ereignis-Listener hinzuzufügen. Ein Wort der Warnung: Ich bin noch Student, und das ist vielleicht nicht die beste Praxis, aber zumindest habe ich nicht das bestehende HTML verändert.

Nachdem wir uns also die Benennungsregeln für dieses Thema durchgelesen haben, können wir mit dem Nützlichen weitermachen, dem Zugriff auf und dem Setzen von Werten, gefolgt von einigen Beispielen.

Der Zugriff auf die Werte gibt uns meiner Meinung nach mehr Möglichkeiten zur Manipulation, als wenn wir nur den className oder die id aufrufen. Das ist mächtig, weil wir uns keine Sorgen machen müssen, ob das Designteam eines Tages kommt und sagt: „Stell dir vor, wir haben alle unsere Klassen umbenannt. Hier sind einige Beispiele für die Syntax:

Hier ein Beispiel von Mozilla:

Und für meine „Kumpels“.“ Das hier sollte wirklich ins Schwarze treffen. Bei unserer Paarprogrammierung im Toyland haben Alex und ich es so gemacht:

Nach einem Gespräch mit einem Freund, der jetzt React lernt, werden wir, wenn du dir den Code durchliest, feststellen, dass .innerText eine IE-Methode ist und wir .textContent verwenden sollten, aber das ist ein Thema für einen anderen Beitrag.

Bei der Menge an Zeit, die wir mit dem Lernen von neuem Material verbringen, gehen manchmal wichtige Aspekte unter. Sobald die Projektwoche da ist, glaube ich, dass wir alle viel besser darin werden, diese benutzerdefinierten Tools zu nutzen, um das DOM zu manipulieren und sauberen Code zu schreiben. Ich hoffe, die Lektüre hat Ihnen gefallen!