MECÁNICA
DEL NAVEGADOR

Dominando el DOM y las APIs

¡Bienvenido! Soy tu mecánico guía. Antes de abrir cualquier editor de código, necesitas conocer la herramienta más poderosa que ya tienes: tu navegador.

Aquí vas a aprender a desarmar y rearmar cualquier página web.

🔦

!

"No abras un editor todavía. Ve a cualquier página y presiona F12. Bienvenido a tu taller real."

🔦 LA LINTERNA

Usa la flecha de inspección para iluminar piezas específicas. Verás que el HTML no es texto… es la estructura física que sostiene todo.

Elements Console Sources Network

▼ <html>

▼ <body>

<h1 class= "titulo" > Taller Abierto </h1>

<p class= "desc" > Bienvenido </p>

👆 Haz clic en un elemento para inspeccionarlo

CHASIS DEL AUTO = DOM DE LA WEB

<html> ← raíz del documento

<head> metadatos

<body>

<h1> ← pieza 1

<div> ← pieza 2

<p> ← pieza 3

// Accede al chasis completo:
estructura = document.documentElement

El DOM es el chasis. La base física sobre la que se monta TODO. No es código abstracto… son las piezas reales que puedo tocar y modificar.

🪛 HTML — FABRICAR LAS PIEZAS

Cada pieza HTML tiene una etiqueta de apertura y una de cierre. Es como el molde superior e inferior que da forma a la pieza. Lo que va entre ellas es el contenido.

            <h1>
            Taller de Mecánica
            </h1>
          
            👆 Haz clic en cada parte para saber qué hace

CATÁLOGO DE PIEZAS COMUNES

<h1>…</h1> Título principal — pieza grande

<p>…</p> Párrafo — pieza de texto

<div>…</div> Contenedor — caja donde van otras piezas

<button>…</button> Botón — pieza que dispara eventos

⚒️ FORJA EN VIVO — elige una pieza

VISTA PREVIA:

← selecciona una pieza

// el código aparece aquí...

🎨 CSS — LIJAR, PINTAR Y PULIR

CSS funciona en 2 pasos: primero seleccionas la pieza (selector), luego le aplicas las propiedades (los ajustes). Como un mecánico que elige la pieza y luego decide qué herramienta usar.

h1 {
color:#c8ff00;
}
            👆 Haz clic en selector, propiedad o valor
          

🔧 TALLER DE PINTURA — ajusta las propiedades

🎨 color #c8ff00

📐 font-size 24px

🔩 border-radius 0px

🖌️ background #111111

/* el CSS generado aparece aquí */

PIEZA EN PROCESO

Pieza

🎨

lijando y pintando...

🔧 ALCANZAR LA PIEZA

"Si quieres cambiar una llanta, no puedes simplemente gritarle al auto '¡cambia la llanta!'. Tienes que agarrar la llave inglesa y colocarla exactamente en el perno."

🔩

La herramienta estrella:

const miPieza = document.querySelector('h1');

document = el documento completo (el auto entero)

querySelector = la mano que alcanza la pieza exacta

'h1' = el número de serie de la pieza

Resultado → Ya tienes la pieza en la mano ✓

➕ BONUS — querySelectorAll: agarrar TODAS las piezas del mismo tipo

// Una pieza: document.querySelector('.tuerca')
// TODAS: document.querySelectorAll('.tuerca')

🔩 tuerca #1

🔩 tuerca #2

🔩 tuerca #3

🔩 tuerca #4

🔩 tuerca #5

🪛 tornillo #1

EL PUNTO ( . ) : EL CONECTOR

OBJETO . HERRAMIENTA

Es como decir: "Del Objeto, quiero acceder a su Herramienta"

EN EL DOM 🖼️

pieza.style

"De la pieza, saca el maletín de estilos"

EN EL ALMACÉN 📦

localStorage.getItem

"Del almacén, usa la herramienta para obtener"

EN EL MOTOR ⚙️

document.querySelector

"Del documento, usa la mano para buscar"

🛠️ KIT DE AJUSTE

Una vez que sujetas la pieza con querySelector, aplicamos la acción. — Haz clic en cada herramienta para verla en acción ↓

PÁGINA DE PRUEBA

Taller Abierto

Bienvenido al taller mecánico

💾 localStorage:

🎨

El Spray (color)

pieza.style.color = '#c8ff00'

Accedes al estilo y le das un nuevo acabado visual

✓

🔨

El Cincel (texto)

pieza.innerText = '¡Taller Modificado!'

Accedes al contenido y grabas un nuevo nombre

✓

📦

El Almacén (localStorage)

localStorage.setItem('mecanico','activo')

Accedes al cuarto de almacenamiento y guardas la caja

✓

// ← Haz clic en una herramienta para ver el código en acción...

⚡ JAVASCRIPT — METER ENERGÍA

HTML fabrica las piezas. CSS las pinta. Pero sin JS nada se mueve. JavaScript es la batería y el motor eléctrico: le da vida, reacciona al usuario y puede cambiar TODO en tiempo real.

🪛

HTML — LA CARROCERÍA

Estructura y piezas. Sin HTML no hay nada que ver.

🎨

CSS — LA PINTURA

Color, forma, tamaño. Sin CSS es todo gris y feo.

⚡

JS — EL MOTOR ELÉCTRICO

Lógica, animaciones, respuesta al usuario. Sin JS el auto no arranca.

⚡ LABORATORIO — haz clic en cada operación

// ← clic en una operación para ver el código...

⚡ ENERGÍA EN VIVO

Taller Apagado

Sin energía...

          > esperando...
        

⚡ CONECTAR CABLES — EVENTOS

"Un motor no explota solo. Alguien tiene que girar la llave. Los eventos son exactamente eso: acciones del usuario que encienden el código."

DIAGRAMA DE CABLES — haz clic en un evento para ver el flujo

🖱️ evento 'click'

⌨️ evento 'input'

📄 evento 'load'

addEvent
Listener

⚙️ función function fn(){}

🖥️ acción console.log()

🎨 acción cambiar DOM

// ← Haz clic en un evento para ver cómo se conecta el cable...

⚡ PLAYGROUND VIVO

🔌

El muñequito
soldando cables ⚡

🔧 RETO RÁPIDO

¿Cuántos eventos puede tener un mismo elemento?

🏆

¡TALLER DOMINADO!

Ruta del Aprendiz completada:

01 ESCANEO DevTools & F12

02 SUJECIÓN querySelector

03 REPARACIÓN style & innerText

04 ENTREGA querySelectorAll & Eventos

// Ejecutando en consola del navegador...

console.log("¡Listo para trabajar!")

> ¡Listo para trabajar! ✓