Manipular el HTML desde TS

El Document Object Model (DOM)

Esta estructura arborescente de un archivo html se llama el DOM (Document Object Model) y puede ser manipulado programáticamente, es decir, existe un API para manipular el DOM y cada uno de sus elementos. El DOM es independiente de la plataforma y del lenguaje de programación(hay un API por cada lenguaje en particular hay uno para JavaScript/TypeScript) para manipular el DOM

Los dos conceptos principales del DOM son Document y Element. El árbol de la figura 1 es un Document y cada nodo es un HTMLElement.

Figura 1

El API DOM nos provee servicios para:

• encontrar un o unos elemento(s) en el documento. Por ejemplo, encontrar el primer elemento que tiene etiqueta h1.
• modificar un elemento. Por ejemplo, cambiar el contenido del primer párrafo (etiqueta p).
• crear nuevos elementos. Por ejemplo, crear un nuevo párrafo (etiqueta p).

Documentación Oficial

La documentación completa del API DOM está disponible en MDN Web Docs. En este tutorial vamos a ver los servicios básicos más utilizados.

Encontrar un elemento en el documento HTML

Dado un nodo del árbol DOM, a partir de ese punto se puede buscar un/unos elemento/s utilizando las siguientes funciones:

Función	Descripción
getElementById()	Devuelve el elemento que tiene el atributo ID con el valor especificado.
getElementsByClassName()	Devuelve una colección HTMLCollection que contiene todos los elementos con el nombre de clase especificado.
getElementsByName()	Devuelve una colección HTMLCollection que contiene todos los elementos con el nombre especificado.
getElementsByTagName()	Devuelve una colección HTMLCollection que contiene todos los elementos con el nombre de la etiqueta especificada.
querySelector()	Devuelve el primer elemento que coincida con el selector CSS especificado (moderna y recomendada).
querySelectorAll()	Devuelve todos los elementos que coincidan con el selector CSS especificado.

Métodos modernos

querySelector() y querySelectorAll() son las formas modernas y recomendadas para buscar elementos. Permiten usar cualquier selector CSS válido, lo que las hace más poderosas y flexibles que los métodos anteriores.

Ejemplo básico: getElementById

Veamos un ejemplo utilizando nuestro HTML inicial representado en el árbol de la figura 1.

Queremos obtener el elemento que está identificado con el id cuyo valor es "principal". Utilizamos el método getElementById. La variable document, es una variable global que representa todo el documento HTML actual.

El nodo que recuperamos tiene una propiedad llamada innerText que contiene el valor del elemento (el texto que aparece en la página).

let nodoH1 = document.getElementById("principal");

console.log(nodoH1.innerText); // Encabezado nivel 1

Ahora, podemos usar la propiedad innerText para cambiar el valor y ver en consola el resultado.

nodoH1.innerText = "Hola mundo contaminado";

console.log(nodoH1.innerText); // Hola mundo contaminado

Al desplegar en el navegador tenemos:

Figura 2

En el código anterior la variable nodoH1 no tenía ningún tipo definido. La función getElementById retorna un Element o null si no lo encuentra. Entonces la declaración correcta de la variable sería:

let nodoH1 :HTMLElement | null = document.getElementById("principal");

Sin embargo, en el modo estricto de tipos en TypeScript, si una variable puede ser null, está no puede accederse directamente, a menos que vaya en un condicional sobre null . Es decir, el código nodoH1.innerText va a producir un error. Una forma de resolverlo es agregando un condicional:

var nodoH1 : HTMLElement | null = document.getElementById("principal");

console.log(nodoH1 == null? '': nodoH1.innerText); // Encabezado nivel 1

La solución anterior, además, tiene otro problema y es el tipo de nodeH1 no es el esperado para otras funciones que necesitan HTMLElement. Necesitamos que el tipo de nodeH1 sea HTMLElement pero que pueda tomar el valor de null . Esto se logra con el operado (sufijo) ! al final de la función que retorna el elemento:

var nodoH1 : HTMLElement | null = document.getElementById("principal")!;

console.log(nodoH1.innerText); // Encabezado nivel 1

Métodos modernos: querySelector

Para búsquedas más complejas, querySelector() es más poderosa y flexible:

// Encontrar el primer elemento con clase "destacado"
const elemento = document.querySelector(".destacado");

// Encontrar el primer input dentro de un formulario
const input = document.querySelector("form input[type='text']");

// Encontrar elemento anidado
const enlace = document.querySelector(".menu .active a");

elemento.innerText = "Nuevo contenido";

Si necesitas encontrar todos los elementos que coincidan:

// Encontrar todos los párrafos
const parrafos = document.querySelectorAll("p");

// Encontrar todos los elementos con clase "card"
const tarjetas = document.querySelectorAll(".card");

// Iterar sobre los resultados
tarjetas.forEach((tarjeta) => {
  tarjeta.style.backgroundColor = "lightblue";
});

Actividad interactiva: Practica encontrar elementos

Ahora es tu turno. En el playground interactivo de abajo, hay un HTML con varios elementos. Tu tarea es escribir código JavaScript para encontrarlos y mostrar su contenido en la consola.

¿Cómo funciona?

1. Panel izquierdo: Selecciona un ejercicio de la lista
2. Panel central: Verás el código JavaScript listo para ejecutar
3. Panel derecho (después de hacer clic en “Consola”): Verás el resultado de console.log()
4. Botón “▶ Ejecutar”: Corre el código y muestra el resultado en la consola
5. Si el resultado es correcto, verás un ✅ verde

Los 4 pasos que vas a practicar:

• Paso 1: Encontrar un elemento por ID (getElementById)
• Paso 2: Encontrar el primer elemento con una clase (querySelector)
• Paso 3: Encontrar TODOS los elementos con una clase (querySelectorAll)
• Paso 4: Modificar el contenido de un elemento que encontraste

🔧 Encuentra elementos en el DOM

HTMLCódigoConsola

Paso 1: Encontrar por ID✓

Paso 2: Encontrar por clase (primero)✓

Paso 3: Encontrar todos por clase✓

Paso 4: Modificar contenido✓

▶ Ejecutar↺ Reiniciar

>

Quiz: ¿Cuál es el método correcto?

Elige el método más apropiado para cada búsqueda:

1.

Necesitas encontrar el elemento con id='header'

🎯 Buscar por ID

document.querySelector('#header')document.getElementById('header')document.getElementsByClassName('header')document.querySelectorAll('header')

2.

Necesitas encontrar TODOS los elementos con clase 'tarjeta'

🎯 Buscar múltiples elementos por clase

document.querySelector('.tarjeta')document.getElementById('tarjeta')document.querySelectorAll('.tarjeta')document.getElementsByClassName('.tarjeta')

3.

Necesitas encontrar el PRIMER botón dentro de '.modal'

🎯 Buscar con selector CSS complejo

document.getElementById('.modal button')document.querySelector('.modal button')document.getElementsByTagName('button')document.getElementsByClassName('modal')

4.

Necesitas encontrar todos los input[type='text']

🎯 Buscar con selector de atributo

document.getElementsByTagName('input')document.querySelectorAll("input[type='text']")document.querySelector("input[type='text']")document.getElementById('input')

5.

Necesitas buscar en una sección específica, no en todo el documento

🎯 Buscar dentro de un elemento

document.querySelector('selector')const seccion = document.getElementById('contenido'); seccion.querySelector('selector')document.getElementById('contenido').getElementsByTagName('selector')No es posible buscar dentro de un elemento

✓ Verificar respuestas

Crear un nuevo elemento en el documento HTML

Existen varios métodos para crear nuevos elementos en un DOM. La idea básica es crear el nuevo elemento con la función createElement o con el texto HTML ‘

hola

’, tener localizado el lugar (el elemento) dónde se va a insertar el nuevo. Este puede ser agregado ya sea de forma adyacente al elemento actual o como hijo del elemento actual. Vemos un ejemplo:

var nuevoParrafo = document.createElement("p"); // creo el nuevo elemento
nuevoParrafo.innerText = "Párrafo nuevo";

// Se va a crear el elemento con respecto al `h1 `del HTML, la posición se define con respecto a ese h1.

nodoH1.insertAdjacentElement('afterend', nuevoParrafo);   // agrego un elemento creado
nodoH1.insertAdjacentHTML('afterend', '<p id="two">Otro Párrafo</p>') // agrego un elemento con el texto html

El resultado al desplegar el HTML es:

Figura 3

Manipulación de atributos

Además de innerText, puedes manipular otros aspectos del elemento:

• innerHTML: Establece el contenido HTML (incluyendo etiquetas)
• setAttribute(): Cambia atributos como class, id, data-*
• style: Modifica estilos CSS directamente
• classList: Agregar/remover clases CSS de forma segura

elemento.innerHTML = "<strong>Contenido con HTML</strong>";
elemento.setAttribute("data-id", "123");
elemento.classList.add("activo");
elemento.style.color = "red";

Actividad interactiva: Crea y manipula elementos

Ahora vas a crear elementos nuevos desde cero y modificarlos. El playground de abajo tiene un área vacía donde puedes agregar contenido dinámicamente.

¿Cómo funciona?

1. Selecciona un ejercicio de la lista
2. El código JavaScript aparece en el panel central
3. Haz clic en “▶ Ejecutar” para correr el código
4. Mira en el panel izquierdo cómo cambia el DOM
5. Verifica en la consola que la operación fue exitosa
6. ¡Si es correcto, verás un ✅ verde!

Los 4 pasos que vas a practicar:

• Paso 1: Crear un nuevo párrafo dinámicamente y agregarlo al DOM
• Paso 2: Agregar contenido HTML usando insertAdjacentHTML
• Paso 3: Modificar atributos de elementos existentes
• Paso 4: Usar classList para agregar clases CSS a elementos

🔧 Crea y modifica elementos

HTMLCódigoConsola

Paso 1: Crear un párrafo✓

Paso 2: Agregar contenido HTML✓

Paso 3: Modificar atributos✓

Paso 4: Usar classList✓

▶ Ejecutar↺ Reiniciar

>

Resumen y buenas prácticas

Recomendaciones

1. Prefiere querySelector() y querySelectorAll() sobre los métodos legacy. Son más potentes y legibles.
2. Siempre valida nulos - Verifica que el elemento exista antes de manipularlo.
3. Usa innerText para texto, innerHTML para HTML. Cuidado con innerHTML en datos del usuario (riesgo XSS).
4. Usa classList para manejar clases CSS en lugar de manipular className directamente.
5. Evita manipulación excesiva del DOM en bucles. Es lento. Considera crear elementos en memoria primero.

Ejercicios de evaluación

Ejercicio 1: Encontrar elementos

Completa el código para encontrar los elementos correctos:

const titulo = document.;
const primero = document.;

VerificarReiniciar

Ejercicio 2: Crear y agregar elementos

Completa el código para crear un nuevo elemento y agregarlo al DOM:

const nuevo = document.;
nuevo.innerText = 'Nuevo contenido';
contenedor.;

VerificarReiniciar

Ejercicio 3: Manipular estilos y atributos

Completa el código para modificar un elemento:

const elemento = document.querySelector('#especial');
elemento.;
elemento.;

VerificarReiniciar

Quiz conceptual

1. ¿Cuál es la diferencia entre querySelector() y querySelectorAll()?

querySelector() solo busca en el elemento actualquerySelector() devuelve el primer elemento, querySelectorAll() devuelve todosquerySelectorAll() no funciona con clases CSSNo hay diferencia, son alias del mismo método

2. ¿Cuál es la mejor forma de agregar una clase CSS a un elemento?

elemento.className = 'mi-clase'elemento.classList.add('mi-clase')elemento.setAttribute('class', 'mi-clase')elemento.style.class = 'mi-clase'

3. ¿Qué sucede si getElementById() no encuentra un elemento?

Lanza una excepción (error)Devuelve un objeto vacío {}Devuelve nullDevuelve undefined

4. ¿Cuál es la diferencia entre innerText e innerHTML?

innerText es más rápido que innerHTMLinnerText muestra solo texto, innerHTML interpreta HTMLinnerHTML solo funciona en navegadores antiguosNo hay diferencia, son lo mismo

5. ¿Cómo insertas un nuevo elemento como hijo de otro elemento?

elemento.addChild(nuevoElemento)elemento.appendChild(nuevoElemento)elemento.insertChild(nuevoElemento)elemento.addElement(nuevoElemento)

Comprobar