LECCIÓN 26 / 60 · El DOM hace visible tu código

Distingue DOM, documento y elementos HTML

Identificar un nodo de la página que JavaScript puede modificar.

Ruta esencial≈ 12 minNavegador y DOM

Entiende la idea

El DOM es la representación de los elementos de una página que el navegador pone a disposición de JavaScript. Gracias a él puedes cambiar lo que una persona ve sin tener que recargar el documento.

El navegador transforma HTML en nodos y pone a disposición document para consultarlos. Esta API pertenece al entorno del navegador, no al lenguaje JavaScript por sí mismo.

Así funciona el ejemplo

querySelector('#saludo') busca el elemento cuyo id es saludo. Primero textContent lee el texto actual; después la asignación lo sustituye por JavaScript está aquí. Mira la vista previa: la consola y la página son cosas distintas.

Pruébalo

Antes de ejecutar, piensa: ¿Qué zona cambia al asignar titulo.textContent?

HTML + CSS + JS Laboratorio interactivo
Vista previa aislada · Sin acceso al sitio principal
Consola
Lista para ejecutar.
Listo
Ver el resultado explicado

Cambia el texto del h2 en la vista previa; no es necesario reescribir todo el documento.

Ahora te toca

Cambia el texto del título dos veces.

Haz el cambio en el editor de arriba, ejecútalo y compara el resultado.

¿Algo no funciona? Ver una pista

document no está disponible automáticamente en Node.js.

Vuelve al ejemplo inicial con «Restaurar» si necesitas comenzar de nuevo.

Qué debes recordar: El DOM es una representación en objetos del documento HTML.

Practicar otro reto →

2026-10-08 · Consultar documentación técnica en MDN ↗