🦊Lección
Lección
⌂
🔒https://redes.os/lecciones/dom
← Todas las lecciones
Lección 08 de 9

DOM — el punto, textContent y buscar elementos

No memorizas textContent: aprendes a leer el punto (.). Cosa + característica. Intención primero.

1 · La traba

No es textContent: es el punto.

Qué es
Cuando ves elemento.textContent o algo raro como lorem.ipsumDolorSitAmet, no lo leas como una sola palabra. Sepáralo por el punto.
Por qué existe
Lo que frena no es memorizar nombres: es no saber leer «cosa . característica». Cuando entiendes el punto, sabes qué pedirle al programa.
Cómo funciona (paso a paso)
  1. Mira qué hay ANTES del punto (la cosa).
  2. Mira qué hay DESPUÉS (la característica o herramienta).
  3. Lee en español: «el texto DE ese elemento», «el color DEL auto».
  4. Pregunta: ¿qué le quiero decir al programa? → luego traduce.
Ejemplo sencillo
elemento.textContent = «del elemento, quiero su contenido de texto».
Analogía
Como una ficha: persona.nombre = el nombre de la persona. El punto es «de» / «su».
2 · El punto

. = «de» / «su» / «pertenece a»

Palabra nueva.
Primero · ¿Qué le quiero decir al programa?
«Quiero acceder a una característica o herramienta que pertenece a algo.»
  1. Tengo una cosa (persona, auto, elemento).
    ↓
  2. Quiero algo que le pertenece (nombre, color, texto).
    ↓
  3. Lo escribo: cosa.característica
Después · Cómo se escribe
persona.nombre     // el nombre de la persona
auto.color         // el color del auto
usuario.correo     // el correo del usuario
titulo.textContent // el texto del título
lorem.ipsumDolorSitAmet también se lee «ipsumDolorSitAmet de lorem» — pero esos nombres no significan nada especiales: alguien los inventó. persona.nombre sí tiene sentido.
Aprendes por intención, no por sintaxis
Comprueba
auto.color significa… B. El color que pertenece al auto (no «el auto del color»).
3 · textContent

El texto del cartel

Palabra nuevatextContent
Primero · ¿Qué le quiero decir al programa?
«Quiero leer o cambiar el texto que está dentro de este elemento HTML.»
  1. Encontré un cartel (el elemento).
    ↓
  2. Quiero el texto escrito en ese cartel.
    ↓
  3. O: quiero borrar ese texto y poner otro.
Después · Cómo se escribe
// HTML: <p id="mensaje">Hola mundo</p>

let mensaje = document.getElementById("mensaje");
console.log(mensaje.textContent);  // "Hola mundo"
mensaje.textContent = "Adiós";     // ahora dice Adiós
mensaje = el elemento completo (la caja). mensaje.textContent = solo el texto adentro.
Aprendes por intención, no por sintaxis
¿Por qué la consola muestra «Hola mundo»?
  1. JS busca el elemento con id="mensaje".
  2. Lo encuentra: <p id="mensaje">Hola mundo</p>.
  3. textContent lee el texto dentro del <p>.
  4. console.log() lo muestra en la consola.
4 · getElementById

Documento, buscá este id

Palabra nuevadocument.getElementById
Primero · ¿Qué le quiero decir al programa?
«Documento, buscá el elemento cuyo identificador es …»
  1. document = el documento HTML completo.
    ↓
  2. getElementById = la herramienta para buscar por id.
    ↓
  3. ("titulo") = el id que quiero encontrar.
Después · Cómo se escribe
document.getElementById("titulo")
// Documento, buscá el elemento cuyo id es "titulo"

let titulo = document.getElementById("titulo");
// Guardar el resultado en una caja llamada titulo
Si el id no existe, getElementById() devuelve null. Por eso a veces la consola muestra null.
Aprendes por intención, no por sintaxis
Ideas clave
  • getElementById() busca un elemento por su id.
  • textContent lee o cambia el texto de ese elemento.
  • Si el id no existe → null.
5 · Ejemplo guiado

Cambiar el texto de un título

HTML de partida:

<h1 id="titulo">Bienvenido</h1>
Cambiar «Bienvenido» por «Hola»
El enunciado · ¿Qué me pide?
Buscar el título y cambiar lo que dice.
Como persona (sin código)
Buscaría el cartel llamado titulo. Borraría su texto. Escribiría un texto nuevo.
Paso A · Antes de cualquier línea de código

¿Qué quiero decirle al programa?

  1. Buscar el elemento cuyo identificador es titulo.
    ↓
  2. Guardarlo en una caja llamada titulo.
    ↓
  3. Acceder al texto de ese elemento.
    ↓
  4. Cambiarlo por "Hola".
Paso B · Ahora sí

Traducir cada frase a JavaScript

Frase 1Buscar por id.
document.getElementById("titulo")
Frase 2Guardar el resultado.
let titulo = document.getElementById("titulo");
Frase 3Acceder a su texto.
titulo.textContent
Frase 4Cambiar el texto a "Hola".
titulo.textContent = "Hola";
Pensamientos → frases en español → código. No memorizas: traduces.

La frase completa: «El texto del título ahora será igual a Hola.»

6 · Ejercicio 2

Texto, color y clase — por fases

mensaje + caja
El enunciado · ¿Qué me pide?
Buscar mensaje, cambiar «Hola» por «Adiós». Buscar caja, fondo amarillo, agregar clase activo.
Como persona (sin código)
Tenés una caja con etiqueta «Hola». Buscás esa caja, borrás Hola y escribís Adiós. Luego buscás otra caja, la pintás de amarillo y le pegás la calcomanía «activo». Eso es exactamente lo que JS hará con el HTML.
Paso A · Antes de cualquier línea de código

¿Qué quiero decirle al programa?

  1. Buscar el elemento cuyo id es mensaje.
    ↓
  2. Cambiar su texto a Adiós.
    ↓
  3. Buscar el elemento con id caja.
    ↓
  4. Cambiar el color de fondo a amarillo.
    ↓
  5. Agregarle la clase activo.
Paso B · Ahora sí

Traducir cada frase a JavaScript

Frase 1Buscar mensaje y guardar.
let mensaje = document.getElementById("mensaje");
Frase 2Cambiar su texto.
mensaje.textContent = "Adiós";
Frase 3Buscar caja.
let caja = document.getElementById("caja");
Frase 4Pintar el fondo de amarillo.
caja.style.backgroundColor = "yellow";
Frase 5Agregar la clase activo.
caja.classList.add("activo");
Pensamientos → frases en español → código. No memorizas: traduces.
Antes de completar espacios — comprueba
Cuando el programa encuentra el elemento mensaje, ¿qué quiere hacer con él? Cambiar su texto (no el color ni eliminarlo). El enunciado dice: cambiar «Hola» por «Adiós».
7 · ¿Qué escribir después del punto?

No te lo inventás

La pregunta de todos los principiantes
No se trata de memorizar que existen textContent, style o classList. La pregunta real es: ¿Cómo sé qué escribir después del punto (.)?
Qué es
No te lo inventás. Cada tipo de «cosa» en JavaScript ya trae sus propias herramientas y características.
Por qué existe
Cuando hacés let titulo = document.getElementById('titulo'), titulo guarda un elemento HTML. Ese elemento ya viene con botones incorporados — vos no los creaste.
Cómo funciona (paso a paso)
  1. Empezás en español: «Quiero cambiar el texto.»
  2. Preguntás: ¿qué herramienta sirve para el texto? → textContent
  3. «Quiero cambiar el color.» → estilos → style → color → elemento.style.color
  4. «Quiero la etiqueta activo.» → clases → classList → add → elemento.classList.add('activo')
Ejemplo sencillo
Cadena de ideas: tengo un elemento → quiero sus estilos → dentro, el color. No salió de la nada.
Analogía
Comprás una TV. El control tiene Encender, Volumen, Canal. No inventás el botón «hacerPalomitas»: ese botón no existe. Con un elemento HTML pasa igual.
Si quiero…Uso
Leer o cambiar el textoelemento.textContent
Meter HTML adentroelemento.innerHTML
Cambiar estiloselemento.style
Color del textoelemento.style.color
Fondoelemento.style.backgroundColor
Agregar / quitar claseselemento.classList
Agregar una claseelemento.classList.add("activo")
Valor de un <input>elemento.value
Buscar por iddocument.getElementById("…")

Al principio no las sabés todas — igual que un celular nuevo. Se aprenden poco a poco. El navegador ya las definió; vos elegís según la intención.

Error común
Pensar que cualquier palabra funciona después del punto. elemento.pizza no tiene sentido: un elemento HTML no tiene una propiedad llamada pizza.
Cartilla
  1. ¿Qué quiero decirle al programa?
  2. ¿Cuál es la cosa? (documento, párrafo…)
  3. ¿Qué quiero hacer con esa cosa?
  4. ¿Qué herramienta ya existe para eso?
  5. Traducir: cosa.herramienta
Práctica en español (antes del código)
Si pensás: «Quiero cambiar el color de un párrafo.»
  1. La cosa: el párrafo (el elemento).
  2. Qué modificar: su color (estilos → color).
  3. Después traducís: parrafo.style.color = "…";
8 · Cadenas de ideas

Siempre el mismo patrón

Primero pensás en la cosa. Después en qué querés hacer con esa cosa.

document.getElementById(...)
Cosa: document. Acción: buscar un elemento por id.
titulo.textContent
Cosa: titulo. Característica: su texto.
titulo.style.color
Cosa: titulo → estilos → color.
titulo.classList.add("activo")
Cosa: titulo → lista de clases → agregar. En español: «Al elemento, en su lista de clases, agregale activo.»
Analogía de la caja
Un elemento es una caja con compartimentos:
  • .textContent — el texto
  • .style — los estilos
  • .classList — la lista de clases (calcomanías)
9 · ¿Cómo se llama lo del punto?

Propiedad vs método

Lo que está después del punto no se llama todo igual. Puede ser una propiedad o un método.

Propiedad

«Quiero saber algo de esta cosa» / qué tiene o cómo es.

  • el color del auto
  • el nombre de una persona
  • el texto de un elemento
auto.color
persona.nombre
elemento.textContent

Se lee: «el texto del elemento». Suele ir sin ().

Método

«Quiero pedirle a esta cosa que haga algo» / qué puede hacer.

  • agregar una clase
  • buscar por id
  • caminar, llamar, encender…
classList.add("activo")
getElementById("titulo")
persona.caminar()

Los métodos llevan paréntesis ( ): add(), remove(), toggle()…

Palabra nuevapropiedad · método
Primero · ¿Qué le quiero decir al programa?
«Quiero acceder a una característica O pedirle una acción.»
  1. Una persona tiene características: nombre, edad, altura.
    ↓
  2. También puede hacer acciones: caminar, hablar, correr.
    ↓
  3. Propiedad = qué tiene. Método = qué puede hacer.
Después · Cómo se escribe
persona.nombre      // propiedad: el nombre de la persona
persona.caminar();  // método: pedirle que camine

elemento.textContent           // propiedad: el texto
elemento.classList.add("activo"); // método: agregar clase
Teléfono: propiedades = color, batería, volumen. Acciones = encender, apagar, llamar.
Aprendes por intención, no por sintaxis
Error común
Pensar que todo lo del punto se llama igual. Si describe una característica → propiedad. Si realiza una acción → método.
Comprueba
En caja.classList.add("activo"), ¿add() es una característica o una acción?
Una acción (método): «agregar». Por eso lleva ().
textContent sería la característica (propiedad): el texto.
Mini: acceder al texto
El enunciado · ¿Qué me pide?
Quiero acceder al texto de un elemento.
Como persona (sin código)
Dame el texto del elemento.
Paso A · Antes de cualquier línea de código

¿Qué quiero decirle al programa?

  1. Tengo un elemento.
    ↓
  2. Quiero su texto (característica, no una acción).
    ↓
  3. Usar la propiedad textContent.
Paso B · Ahora sí

Traducir cada frase a JavaScript

Frase 1El texto del elemento.
elemento.textContent
Pensamientos → frases en español → código. No memorizas: traduces.
◀ Anterior
Frontend, DOM y renderizado
Siguiente ▶
Ingeniería de Contexto y Deploy
Listo · conexión segura
⭐Nv 1🪙 0🔥 0--:--
🏠Escritorio🎓¿Qué estudiar?📚Lecciones👨‍🏫Profesor📖Diccionario JS🌐Simulador🎯Quiz
🏅0 medallas