CodeAventura
JavaScript en el DOM
▸Recorrido y manipulación▸Atributos y dataset

Misión

●localhost:5173
06 / 16Atributos y dataset
Anterior

Atributos y dataset

Los atributos también son estado

En frontend no solo cambias texto. Muchas veces necesitas modificar atributos como:

  • href
  • target
  • disabled
  • data-*

Eso también es manipulación de DOM.

Leer y escribir atributos

Con eso puedes reconfigurar comportamiento del elemento en tiempo real.

Mini caso real

Imagina que tienes un enlace a un curso y una línea de estado debajo. Quieres dejar el enlace listo para abrirse en otra pestaña y mostrar qué curso representa.

Para eso puedes:

  • leer el href con getAttribute
  • cambiar target con setAttribute
  • leer data-curso-id con dataset
  • mostrar un resumen visible con textContent

data-* y dataset

Los atributos personalizados (data-id, data-role, etc.) son ideales para guardar metadatos.

Observa la convención:

  • HTML: data-curso-id
  • JS: dataset.cursoId

Cuándo usar dataset

Úsalo para información de UI que no es semántica visual, por ejemplo ids, tipos, estados internos o acciones.

Tu desafío 🚀

  1. Selecciona el enlace #link-curso
  2. Selecciona #estado-link
  3. Lee su href con getAttribute
  4. Cambia target con setAttribute
  5. Lee data-curso-id con dataset
  6. Usa esa información para actualizar un texto visible en pantalla

Dominar atributos te permite construir interfaces configurables y limpias.