El propósito de esta entrada de blog es aclarar algunas confusiones al usar el atributo data en Javascript. Como estudiante de ingeniería de software, a veces el mundo del bootcamp y el mundo real parecen estar estrechamente relacionados pero a la vez separados por galaxias. Durante una de nuestras clases estábamos modificando clases y añadiendo ids a html directamente y un estudiante mencionó que no era particularmente sabio modificar estas cosas porque el equipo de diseño podría tener problemas.
Esto tenía total sentido. Entra, HTMLElement.dataset. La propiedad dataset proporciona a los programadores de JS la capacidad de leer/escribir atributos personalizados en un elemento. El beneficio es que su accesible en el DOM, así como en HTML.
La parte confusa de esto es que un atributo de datos HTML y su correspondiente dataset.property DOM no comparten el mismo nombre. Esto es lo que he encontrado al leer en el sitio web de MDN.
Aquí es donde vienen la mayoría de los problemas. Como un nuevo programador de JS, pensé que esto es especialmente útil para establecer atributos a los elementos, mientras que la adición de oyentes de eventos. Unas palabras de advertencia: Todavía soy un estudiante y esto puede no ser la mejor práctica, pero al menos no estaba entrando y modificando el HTML existente.
Así que después de leer a través de las reglas de nomenclatura para este tema, podemos entonces avanzar con las cosas útiles, el acceso y el establecimiento de los valores, seguido de algunos ejemplos.
Acceder a los valores, en mi opinión, nos da más opciones de manipulación, a diferencia de sólo llamar al className o al id. Esto es poderoso porque no tenemos que preocuparnos de si el equipo de diseño va a venir un día y decir, adivina qué, hemos renombrado todas nuestras clases. Aquí hay algunos ejemplos de la sintaxis:
Aquí hay un ejemplo que da Mozilla:
Y para mis compañeros de cohorte «compañeros».» Esta sí que debería dar en el clavo. Con nuestro pair programming Toyland, así es como lo usamos Alex y yo:
Después de hablar con un amigo que ahora está aprendiendo React, lo que llegaremos a descubrir, si estáis leyendo este código, es que .innerText es un método de IE, y deberíamos usar .textContent, pero eso es para otro post.
Con la cantidad de tiempo que estamos pasando aprendiendo material nuevo, a veces se nos escapan aspectos importantes. Una vez que llegue la semana del proyecto, creo que todos mejoraremos mucho en la utilización de estas herramientas personalizadas para manipular el DOM y escribir código limpio. Espero que hayan disfrutado de la lectura.