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

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Atributos DOM</title>
  </head>
  <body>
    <a id="link-curso" href="https://example.com" data-curso-id="42">Ir al curso</a>
    <p id="estado-link">Estado pendiente</p>

    <script src="script.js"></script>
  </body>
</html>
●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.