3.4 El DOM¶

El navegador convierte tu HTML en un árbol de objetos llamado DOM (Document Object Model). JavaScript lo usa para leer y cambiar la página.

document
 └── html
      ├── head → title
      └── body → h1, p, button ...

Seleccionar elementos¶

querySelector y querySelectorAll aceptan cualquier selector CSS (#id, .clase, ul > li…).

Cambiar contenido, estilo y atributos¶

Qué quiero	Cómo
Cambiar el texto	`el.textContent = "..."`
Cambiar HTML (con etiquetas)	`el.innerHTML = "<b>...</b>"`
Cambiar un estilo	`el.style.color = "red"`
Añadir / quitar / alternar clase	`el.classList.add("x")` · `.remove("x")` · `.toggle("x")`
Leer / cambiar un atributo	`el.getAttribute("src")` · `el.setAttribute("src", "...")` · `el.src = "..."`
Cambiar el título de la pestaña	`document.title = "..."`

textContent frente a innerHTML

textContent trata el valor como texto. innerHTML interpreta etiquetas: si el valor viene del usuario, es una puerta a ataques (XSS). Prefiere textContent.

Crear y añadir elementos¶

createElement + appendChild permite añadir contenido sin borrar el que ya había.