Primeros pasos con el DOM y eventos

El DOM (Document Object Model) es la representación en forma de árbol de tu HTML. Cuando escribes JavaScript en el navegador, normalmente estás leyendo o modificando nodos del DOM: textos, atributos, clases, estilos o incluso creando elementos nuevos.

1) Seleccionar elementos (querySelector y querySelectorAll)

La base es poder “apuntar” a un elemento del HTML. Con querySelector seleccionas el primero que coincide con un selector CSS:

const boton = document.querySelector("#btnSumar");
const contador = document.querySelector(".contador");
const items = document.querySelectorAll("li");

Consejos rápidos:

ID: #miId
Clase: .miClase
Etiqueta: button, h2…

2) Escuchar eventos (addEventListener)

Un evento es algo que ocurre: un clic, una tecla, el scroll, un cambio de input… Para reaccionar, usamos:

boton.addEventListener("click", () => {
  console.log("Has hecho clic");
});

También es habitual usar eventos como input (en tiempo real), change (cuando el input “se confirma”) o submit (en formularios).

3) Leer y modificar texto y HTML

Para contenido de texto:

contador.textContent = "0";

Para insertar HTML (úsalo con cuidado si proviene del usuario):

document.querySelector("#salida").innerHTML = "<strong>OK</strong>";

4) Atributos, clases y estilos

Las clases suelen ser la forma más limpia de aplicar estilos:

const caja = document.querySelector(".caja");
caja.classList.add("activa");
caja.classList.remove("activa");
caja.classList.toggle("activa");

Para atributos (por ejemplo, en enlaces o imágenes):

const img = document.querySelector("img");
img.setAttribute("alt", "Imagen de ejemplo");

5) Ejemplo completo: contador con sumar y restar

Este patrón es el típico del proyecto “Incrementa/Decrementa”: un número en pantalla y dos botones que lo actualizan.

let valor = 0;

const salida = document.querySelector("#valor");
const btnMas = document.querySelector("#mas");
const btnMenos = document.querySelector("#menos");

function render() {
  salida.textContent = String(valor);
}

btnMas.addEventListener("click", () => {
  valor += 1;
  render();
});

btnMenos.addEventListener("click", () => {
  valor -= 1;
  render();
});

render();

6) Errores típicos

El script se ejecuta antes de que exista el HTML: coloca tu <script> al final del <body> o usa defer.
Selector incorrecto: si querySelector devuelve null, revisa IDs, clases y el orden del DOM.
Confundir textContent/innerHTML: usa textContent para texto seguro; innerHTML solo cuando necesites HTML.