Atributos, classList y data-*

Un elemento es más que su texto: tiene atributos que lo configuran, clases que lo visten y — esto es oro — bolsillos data-* donde puedes guardarle TUS datos. Hoy aprendes a manejar los tres desde JavaScript, con la herramienta correcta para cada uno.

Atributos: casi siempre, propiedad directa

Los atributos estándar del HTML (href, src, value, disabled…) existen como PROPIEDADES del objeto — y así se usan el 90% de las veces:

Regla práctica: propiedad directa para los atributos estándar; getAttribute/setAttribute cuando el atributo no existe como propiedad o necesitas el valor tal cual está escrito en el HTML.

classList: el interruptor de estilos

Las clases ya saben verse bonitas — eso lo resolviste en CSS. Desde JS solo decides CUÁLES lleva puestas cada elemento:

¿Notaste el destructuring de la primera línea? El del módulo 5, aplicado a una NodeList. Y una advertencia de veterano: existe className (el string completo de clases), pero concatenarle strings para "agregar" una clase es frágil y borra lo que había. classList existe para no sufrir eso.

data-*: el bolsillo de datos del elemento

A veces el elemento necesita cargar información que no es contenido ni estilo: el id del gasto, su valor crudo, su categoría. Para eso el HTML permite atributos data-loquesea, y JavaScript los lee en el objeto dataset:

Dos trampas para tatuarse: todo lo que sale de dataset es string (¿sumar valores? Number() primero, como viste en el reduce), y los guiones del HTML se vuelven camelCase en JS: data-fecha-pago se lee dataset.fechaPago.

Mini-reto

Combina las tres herramientas: en el último playground, agrega al CSS la clase .caro (color ámbar, negrilla) y desde JS pónsela con classList.add a los items cuyo dataset.valor supere 20000. Márcalos también con dataset.revisado = "si", y cierra contando en consola cuántos quedaron con classList.contains("caro"). Datos, clases y atributos trabajando juntos.

Qué sigue

classList cambia estilos indirectamente — la clase ya existía en CSS. Pero ¿y si el valor es dinámico, como el ancho de una barra de presupuesto que depende de cuánto has gastado? La próxima lección: estilos desde JavaScript, y cuál es la línea entre lo que se decide en JS y lo que SIEMPRE debe quedarse en CSS.