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.