Cuando escribes JavaScript para mostrar un menú, validar un formulario o cambiar un color al hacer clic, en realidad no estás modificando el archivo HTML. Estás modificando el DOM. Entender esa diferencia es uno de los saltos más importantes al aprender desarrollo web.
Del texto HTML al árbol de objetos
Un archivo HTML no es más que texto. El navegador lo lee, lo interpreta y construye en memoria una representación estructurada llamada DOM (Document Object Model, o Modelo de Objetos del Documento).
Esa representación tiene forma de árbol. El documento es la raíz; <html> es la primera rama; de ahí cuelgan <head> y <body>; y dentro de <body> se ramifican todos los demás elementos. Cada etiqueta, cada atributo y cada fragmento de texto se convierte en un nodo del árbol.
La consecuencia práctica es enorme: como el DOM está formado por objetos, un lenguaje de programación puede recorrerlo, leerlo y modificarlo. Y cuando el DOM cambia, el navegador vuelve a dibujar la pantalla.
Vocabulario básico del árbol
| Término | Significado |
|---|---|
| Nodo | Cualquier punto del árbol: elemento, texto, comentario o atributo |
| Elemento | Nodo que corresponde a una etiqueta HTML |
| Padre | Nodo que contiene a otro |
| Hijo | Nodo contenido dentro de otro |
| Hermanos | Nodos que comparten el mismo padre |
Esta terminología aparece constantemente en la documentación, así que vale la pena familiarizarse con ella desde el principio.
Seleccionar elementos
Antes de modificar algo hay que encontrarlo. Los métodos más usados hoy son:
document.querySelector()devuelve el primer elemento que coincide con un selector CSS.document.querySelectorAll()devuelve todos los que coinciden, en una lista recorrible.document.getElementById()busca por identificador único y es muy rápido.
Como querySelector acepta la misma sintaxis que CSS, puedes escribir selectores tan específicos como ".tarjeta > h2" o "input[type='email']". Si no encuentra nada, devuelve null: por eso conviene comprobar el resultado antes de usarlo, o aparecerá el clásico error de “propiedad de null”.
Leer y modificar contenido
Una vez seleccionado el elemento, hay varias formas de trabajar con él:
textContentlee o escribe el texto plano. Es la opción segura para insertar datos que vienen del usuario.innerHTMLlee o escribe HTML interpretado. Es potente, pero insertar aquí contenido no confiable abre la puerta a ataques de inyección de scripts.setAttribute()ygetAttribute()manejan atributos comosrc,hrefoalt.classListpermite añadir, quitar o alternar clases CSS conadd(),remove()ytoggle().
Una recomendación práctica: en lugar de cambiar estilos uno a uno desde JavaScript, define las clases en el CSS y limítate a añadirlas o quitarlas. El código queda más limpio y la apariencia sigue viviendo donde corresponde.
Crear y eliminar nodos
El DOM también permite construir estructura nueva. El flujo habitual tiene tres pasos:
- Crear el elemento con
document.createElement(). - Configurar su contenido, clases y atributos.
- Insertarlo en el árbol con
append(),prepend()oinsertBefore().
Para quitarlo, basta con llamar a remove() sobre el propio elemento. Así se construyen listas de resultados, filas de tabla o tarjetas generadas a partir de datos.
Eventos: cuándo actuar
Modificar el DOM casi siempre responde a algo que ocurre. Los eventos son ese puente. Se registran con addEventListener(), indicando el tipo de evento y la función que debe ejecutarse.
Los eventos más comunes son click, input, submit, keydown y change. Dos conceptos ayudan mucho aquí:
- Propagación: un evento que ocurre en un elemento sube por sus ancestros. Esto permite la delegación: colocar un solo escuchador en un contenedor para gestionar muchos hijos, incluso los creados después.
- Comportamiento por defecto: enviar un formulario recarga la página. Con
preventDefault()se cancela para procesarlo con JavaScript.
El DOM no es el HTML original
Esta distinción confunde a muchos principiantes. Si abres “ver código fuente” verás el HTML tal como llegó del servidor. Si abres las herramientas de desarrollo e inspeccionas la página, verás el DOM actual, con todos los cambios que el script haya hecho.
Además, los cambios en el DOM viven solo en la memoria del navegador. Al recargar la página desaparecen, salvo que se guarden en un servidor o en un almacenamiento del navegador.
Errores frecuentes
| Problema | Causa habitual | Solución |
|---|---|---|
| El elemento aparece como null | El script se ejecuta antes de que exista el HTML | Colocar el script al final del body o usar defer |
| La página se recarga sola | No se canceló el envío del formulario | Usar preventDefault() |
| La interfaz va lenta | Muchas modificaciones seguidas del DOM | Agrupar los cambios y reducir el número de inserciones |
| Los elementos nuevos no responden | El escuchador se añadió solo a los existentes | Aplicar delegación de eventos |
Por qué sigue siendo importante
Frameworks como React, Vue o Svelte automatizan buena parte de este trabajo, pero todos terminan operando sobre el mismo DOM. Cuando entiendes qué ocurre por debajo, depurar deja de ser adivinanza: sabes si el problema está en la selección, en el evento, en el orden de carga o en el estilo aplicado.
Una buena forma de practicar es construir cosas pequeñas y completas: una lista de tareas, un contador, un filtro de búsqueda sobre una tabla. Cada una obliga a seleccionar, escuchar, modificar y eliminar nodos.
Si quieres avanzar de forma ordenada, los cursos gratuitos de desarrollo web y JavaScript disponibles en Cursa recorren estos temas desde lo básico hasta aplicaciones más completas.
