DOM, eventos y proyecto final
Este es el módulo que le da sentido a todo lo anterior: el DOM (Document Object Model) es la representación en memoria de tu página HTML que JavaScript puede leer y modificar en tiempo real. Aquí es donde strings, arrays, funciones y objetos dejan de ser ejercicios sueltos y se convierten en una página que de verdad reacciona — y donde cierras los 46 módulos de Gráffica Academy.
El DOM: tu HTML, pero como algo que JavaScript puede tocar
Cuando el navegador carga una página, convierte el HTML en una estructura de objetos en memoria — el DOM. Cada etiqueta es un nodo que JavaScript puede leer, modificar, crear o eliminar. Es el puente entre "lo que escribiste en HTML" y "lo que el usuario ve cambiar en pantalla".
El método más directo: busca un único elemento por su atributo id.
Busca el primer elemento que coincida con un selector CSS — el mismo tipo de selector que ya conoces del track de CSS.
Igual, pero devuelve todos los elementos que coincidan, no solo el primero.
Prueba el primer playground de este módulo: aquí abajo tienes una vista previa real, aislada de la página de Gráffica Academy, donde tu código JavaScript puede leer y modificar HTML de verdad sin ningún riesgo. Pulsa "Ejecutar" y observa cómo cambia la vista previa:
Cambia el texto de un elemento, sin interpretar HTML — la opción segura por defecto.
Cambia el contenido interpretando HTML de verdad. Potente, pero peligroso con texto que venga de un usuario (riesgo de inyección) — usa textContent salvo que necesites insertar HTML a propósito.
Cambia un estilo CSS puntual, en camelCase: .style.backgroundColor, no .style.background-color.
Añade, quita o alterna una clase CSS — la forma recomendada de cambiar estilos, dejando el CSS en su sitio.
Eventos: reaccionar a lo que hace el usuario
addEventListener "engancha" una función a un
elemento, para que se ejecute cuando ocurra algo. En el playground de abajo,
después de pulsar "Ejecutar", el botón de la vista previa se vuelve
realmente interactivo — pruébalo tú mismo haciendo clic en él:
El más habitual: un clic del ratón (o un toque en móvil).
Se dispara al enviar un formulario — combínalo con event.preventDefault() para evitar que la página se recargue.
Cada vez que cambia el valor de un campo de texto, letra a letra.
Al pulsar cualquier tecla — útil para atajos de teclado o validaciones en vivo.
Casi cualquier función de evento recibe un objeto event
como argumento (function(event) { ... }), con
información sobre lo ocurrido: qué tecla se pulsó, en qué elemento, etc.
event.preventDefault() es uno de sus usos más
frecuentes, para evitar el comportamiento por defecto del navegador.
Crear elementos nuevos desde cero
Además de modificar lo que ya existe, puedes construir HTML nuevo por
completo con JavaScript: document.createElement()
crea un elemento, y .appendChild() lo inserta en
la página:
Cada playground de este módulo corre en un documento completamente aislado y de usar y tirar: al pulsar "Ejecutar" se reinicia a su estado inicial antes de aplicar tu código, así que puedes probar tantas veces como quieras sin arrastrar cambios de la vez anterior.
Has llegado al final de Gráffica Academy
Has completado los 46 módulos de Gráffica Academy: HTML, CSS, SQL y JavaScript.
Empezaste con tu primera etiqueta <p> y
terminas escribiendo código que modifica el DOM en tiempo real y reacciona a
clics de usuario. Por el camino has aprendido a estructurar contenido, a
darle estilo y hacerlo responsive, a preguntarle datos reales a una base de
datos con SQL, y ahora a programar el comportamiento con JavaScript — las
cuatro piezas que sostienen prácticamente cualquier aplicación web que uses
a diario.
Revisa tu perfil (arriba a la derecha) para ver el recuento completo de logros que has desbloqueado por el camino. Y si algo de todo esto no ha terminado de encajar, no pasa nada: vuelve a cualquier módulo cuando quieras, todos siguen aquí.