CodeAventura
JavaScript en el DOM
▸Fundamentos del DOM▸Traer elementos con selectores

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Selectores DOM</title>
  </head>
  <body>
    <h2 id="titulo-dashboard">Dashboard</h2>
    <p class="dato">Usuarios activos</p>
    <p class="dato">Ventas del día</p>
    <p class="resumen">Resumen pendiente</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
03 / 16Traer elementos con selectores
Anterior

Traer elementos con selectores

Seleccionar para poder usar después

Los selectores no sirven para “traer cosas porque sí”. Sirven para encontrar exactamente la parte de la interfaz con la que vas a trabajar.

En este punto del curso todavía no estamos escuchando eventos ni creando elementos nuevos. Pero sí podemos hacer algo útil: leer lo que ya existe en pantalla y construir un resumen visible.

Los 3 métodos que más usarás

getElementById

Es rápido y directo cuando conoces un id único.

querySelector

Devuelve el primer elemento que coincide con un selector CSS.

querySelectorAll

Devuelve todos los elementos que coinciden.

Mini caso real

Imagina un panel con un título, varios datos y una línea de resumen al final. Quieres que la propia página indique cuántos datos encontró.

Para eso necesitas:

  • el título con getElementById
  • el resumen con querySelector
  • todos los bloques .dato con querySelectorAll

Y luego reutilizas esas referencias para cambiar texto visible con textContent:

Cuándo usar cada uno

  • ¿Tienes un id único? getElementById
  • ¿Necesitas el primer match? querySelector
  • ¿Necesitas colección de elementos? querySelectorAll

No es teoría: elegir bien el selector simplifica todo el resto de la solución.

Tu desafío 🚀

  1. Selecciona el título con getElementById
  2. Selecciona el párrafo .resumen con querySelector
  3. Selecciona todos los .dato con querySelectorAll
  4. Usa datos.length para actualizar .resumen
  5. Haz que el texto final visible sea Dashboard: 2 datos listos

Quien domina selectores domina la puerta de entrada al DOM.