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

Encuentra texto en una página con el DOM

Al terminar, podrás: leer el texto de un elemento del DOM

Ruta esencialNavegador / DOM

Conviene conocer: Lección 1 · JavaScript hace que una página responda

La idea clave

El navegador convierte el HTML en elementos que JavaScript puede consultar. Ese conjunto de elementos se llama DOM. En esta lección solo vamos a localizar un título y leer su texto.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

Ejemplo explicado
const titulo = document.querySelector('#saludo');
console.log(titulo.textContent);

Editar y probar este mismo ejemplo ↓

  1. document representa la página.
  2. querySelector busca el elemento con id="saludo". El símbolo # significa «identificador».
  3. textContent permite leer las palabras del título.

Practica con código

Antes de empezar, piensa: ¿De dónde salen las palabras que se muestran en consola?

Cambia el texto del HTML a «Estoy aquí» y vuelve a ejecutar JavaScript.

El resultado que buscamos

En la consola aparece «Estoy aquí».

HTML + CSS + JS Practica aquí
Tu misión

Cambia el texto del HTML a «Estoy aquí» y vuelve a ejecutar JavaScript.

Vista previa aislada · Sin acceso al sitio principal
Consola
Lista para ejecutar.
Sin comprobar
Escribe tu cambio y pulsa «Comprobar solución». Puedes intentarlo tantas veces como quieras.
Listo
Necesito una pista

Abre la pestaña HTML del laboratorio.

Una pista más

Cambia el texto entre <h2> y </h2>, sin modificar id="saludo".

Ver solución y explicación

Modifica a <h2 id="saludo">Estoy aquí</h2> y ejecuta.

Qué debes recordar: document.querySelector localiza elementos que ya existen en el HTML.

Práctica pendiente de corregir

La lectura, las prácticas corregidas y las autoevaluaciones guiadas se guardan por separado en este navegador.

Revisado editorialmente · Referencia técnica específica ↗