← Todas las lecciones
Lección 07 de 7
Frontend, DOM y renderizado
La trinidad HTML · CSS · JS trabaja junta. El DOM es el puente que le permite a JavaScript modificar la página en tiempo real.
1 · La trinidad
HTML · CSS · JavaScript
Qué es
Frontend es lo que corre en el dispositivo del usuario: estructura (HTML), estilo (CSS) y comportamiento (JavaScript).
Por qué existe
Separar roles evita mezclar todo. HTML organiza, CSS viste, JS decide e interactúa. Así entiendes dónde tocar cuando algo falla.
Cómo funciona (paso a paso)
- HTML arma el esqueleto (qué hay).
- CSS pone la ropa (cómo se ve).
- JavaScript es el cerebro (qué pasa al hacer clic, al escribir, etc.).
Ejemplo sencillo
Un botón: HTML lo crea, CSS lo colorea, JS dice qué hacer al pulsarlo.
Analogía
Casa: HTML = paredes y habitaciones, CSS = pintura y muebles, JS = luces, timbre e interruptores.
HTML
El esqueleto
Estructura y organiza el contenido. Es marcado, no programación.
CSS
La ropa
Colores, tipografías, márgenes, diseño visual.
JavaScript
El cerebro
Lógica, interactividad, animaciones, peticiones de datos.
2 · Renderizado
Qué significa que el navegador ‘renderice’
Qué es
Renderizar es el proceso de dibujar en pantalla lo que describe el HTML, el CSS y el JS.
Por qué existe
Tú escribes texto y reglas; el usuario necesita píxeles. El renderizado es el puente entre «archivo» y «lo que se ve».
Cómo funciona (paso a paso)
- El navegador lee HTML, CSS y JS.
- Calcula layout (dónde va cada cosa).
- Pinta píxeles en la pantalla.
- Si JS cambia algo, puede volver a pintar.
Ejemplo sencillo
Cambias el color de fondo con CSS → el navegador repinta la página con ese color.
Analogía
Como un arquitecto (planos) y un pintor (obra terminada): el renderizado es el pintor que hace visible el plano.
3 · Precisión importante
Qué es (y qué NO es) el DOM.
Ajuste conceptual
El DOM no es el que estructura el código para hacerlo visible. Eso lo hace el motor de renderizado del navegador.
Qué es
El DOM es un árbol de objetos en memoria: la traducción del HTML a algo que JavaScript puede tocar.
Por qué existe
JS no lee el archivo HTML como texto plano para cambiar la página. Necesita un mapa vivo de elementos. Ese mapa es el DOM.
Cómo funciona (paso a paso)
- El navegador lee el HTML.
- Lo convierte en un árbol de objetos (padre → hijos).
- JS usa ese árbol para leer o cambiar texto, estilos, etc.
- El motor de renderizado dibuja el resultado.
Ejemplo sencillo
document.querySelector("h1").textContent = "¡Hola!" cambia el título porque el h1 existe en el DOM.
Analogía
El HTML es la lista del supermercado en papel. El DOM es esa misma lista pasada a una app en el celular: ahora puedes tachar, añadir y reordenar en vivo.
El código
// Gracias al DOM, JS puede tocar la página:
document.querySelector("h1").textContent = "¡Hola!";
document.body.style.background = "black";4 · Segunda precisión
Qué es (y qué NO es) el frontend.
Ajuste conceptual
Frontend no es solo el código ya terminado, empaquetado y publicado en internet.
Qué es
Frontend es todo lo que ocurre del lado del cliente: la computadora o celular de quien navega.
Por qué existe
Si crees que «solo es frontend cuando está en la nube», no entiendes dónde corre el código que el usuario toca. Corre en su dispositivo, aunque aún lo estés escribiendo en local.
Cómo funciona (paso a paso)
- Diseñas y programas HTML/CSS/JS.
- Eso se ejecuta en el navegador del usuario.
- Aunque no lo hayas subido a internet, sigue siendo frontend.
Ejemplo sencillo
Abres index.html en tu PC y haces clic en un botón: eso ya es frontend.
Analogía
El escenario de un teatro es frontend aunque el ensayo sea en tu casa: lo importante es que es lo que el público (usuario) ve e interactúa.
5 · Resumen
Cómo todo encaja
- 1. El servidor te manda HTML, CSS y JS.
- 2. El navegador convierte el HTML en el árbol DOM.
- 3. Aplica el CSS (colores, tamaños, posiciones).
- 4. Ejecuta el JavaScript, que puede tocar el DOM y cambiar cosas.
- 5. Renderiza todo en pantalla, y sigue reaccionando a lo que hace el usuario.