Seleccionar elementos: querySelector y querySelectorAll

Aquí cobras una inversión: los selectores CSS que dominas desde el supercurso de maquetación son EXACTAMENTE el idioma con el que JavaScript encuentra elementos. Clases, ids, descendientes, :nth-child… todo lo que sabías para estilar, ahora sirve para agarrar.

El mismo idioma de direcciones

querySelector: tráeme UNO

document.querySelector(selector) recorre el DOM y devuelve el PRIMER elemento que coincida — o null si ninguno coincide:

Ese null del final es el mismo villano de la lección pasada: no revienta al recibirlo, revienta cuando intentas USARLO. Por eso el operador ?. del módulo 5 brilla aquí: fantasma?.textContent devuelve undefined en paz en vez de tumbar el script.

querySelectorAll: tráeme TODOS

Devuelve una NodeList: una colección con todos los que coinciden. Se recorre con forEach o for...of, y tiene .length — pero ojo, NO es un array de verdad:

La dupla que usarás mil veces: [...document.querySelectorAll(...)] y encima todo tu arsenal del módulo 4 — map, filter, reduce. El DOM y los arrays acaban de conectarse.

Nota honesta: por ahí verás getElementById("titulo") en código ajeno — es el método viejito, funciona perfecto y es un pelín más rápido, pero solo busca por id. querySelector hace eso y todo lo demás con un solo idioma; en este curso usamos ese.

Mini-reto

Sobre el playground de arriba: 1) selecciona solo los gastos de comida y saca sus nombres en un array con spread + map; 2) usa querySelectorAll("li:nth-child(odd)") para confirmar que los selectores avanzados de maquetación funcionan tal cual; 3) pide una clase que no existe y comprueba con .length que recibes una lista vacía, no null — la diferencia con querySelector que acabas de aprender.

Qué sigue

Ya sabes ENCONTRAR cualquier elemento. La próxima lección es sobre cambiarle el contenido: textContent para texto plano e innerHTML para inyectar HTML — con la advertencia de seguridad que separa a los profesionales de los que terminan en las noticias.