DOM
Árbol de DOM, selectores
¿Qué es el DOM?
El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.
- El HTML es estático
- El DOM es dinámico
- JavaScript interactúa con el DOM, no con el HTML original
El DOM es la página web viva dentro del navegador.
El DOM como árbol
El DOM tiene estructura de árbol (grafo):
- Cada etiqueta HTML es un nodo
- Los nodos tienen relaciones (padre, hijos, hermanos)
Ejemplo:
<body>
<h1>Título</h1>
<button>Click</button>
</body>Representación conceptual:
document
└─ body
├─ h1
└─ buttonAcceso al DOM desde JavaScript
El navegador nos proporciona el objeto global document, que permite:
- Buscar elementos
- Leer su contenido
- Modificar la interfaz
document
document.bodySelectores
Por ID
document.getElementById("count")
document.querySelector("#count")Por etiqueta
document.querySelector("button")Por clase
document.querySelector(".item")
document.querySelectorAll(".item")Notas: - querySelector devuelve el primer elemento - querySelectorAll devuelve una lista - Usan la misma sintaxis que CSS
Leer y modificar elementos
element.textContent
element.textContent = "Nuevo texto"element.classList.add("active")
element.classList.remove("active")Eventos
El DOM permite reaccionar a acciones del usuario mediante eventos.
button.addEventListener("click", () => {
// código a ejecutar
});Flujo típico:
Usuario → Evento → JavaScript → DOM actualizadoEjemplo: contador con botón
HTML
<h1 id="count">0</h1>
<button id="btn">Sumar 1</button>JavaScript
let count = 0;
const countEl = document.querySelector("#count");
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
count++;
countEl.textContent = count;
});