Usando el DOM

Introduction to programming (Web)

Docente:

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Pregunta esencial:

¿Cómo transforma el DOM la estructura estática de HTML en un conjunto vivo de objetos que JavaScript puede modificar en tiempo real?

Objetivos de aprendizaje:

1

Modificar elementos existentes en una página web utilizando document.getElementById.
2

Modificar elementos existentes en una página web utilizando document.getElementsByTagName.
3

Explicar el propósito del DOM y su rol en la manipulación dinámica.

¿Qué es el DOM?

El Document Object Model es una interfaz que permite a los programas acceder y actualizar el contenido, la estructura y el estilo de los documentos.

“Es el puente entre el código estático y la interacción dinámica”.

La analogía del títere:

Imagina un títere:

HTML es el cuerpo del títere (lo que vemos).

El DOM son los hilos invisibles que lo controlan.

JavaScript es la persona que tira de los hilos para cambiar sus movimientos.

El árbol del DOM:

Document

Root (HTML)

Head

Body

Cada etiqueta es un 'Nodo' o rama del árbol.

Jerarquía: Raíz, Padres e Hijos:

Raíz:

Es el nodo principal (html). Todo lo demás nace de aquí.

Padres:

Nodos que contienen otros elementos (como un div o body).

Hijos:

Nodos contenidos dentro de un padre (como un p o span).

¿Por qué usar el DOM?

Cambiar texto e imágenes.

Alterar colores y estilos CSS.

Añadir o eliminar elementos.

Reaccionar a eventos (clics).

Seleccionando por Identificador:

document.getElementById("id")

Este método busca un único elemento que tenga el ID especificado en el código HTML.

Sintaxis de getElementById:

let miElemento = document.getElementById("titulo-principal");

document: Indica que buscamos en todo el archivo.
getElementById: Es la función o método de búsqueda.
"id": El nombre del ID entre comillas (sensible a mayúsculas).

Ejemplo resuelto: Paso 1 (HTML):

Primero, definimos un elemento con ID en nuestro HTML:

<h1 id="bienvenida">Hola Mundo</h1>
<button>Cambiar Texto</button>

Ejemplo resuelto: Paso 2 (JS):

Usamos JavaScript para cambiar el contenido:

let titulo = document.getElementById("bienvenida");
titulo.innerHTML = "¡Bienvenido a la programación!";

Análisis del código:

.innerHTML

Es una propiedad que permite leer o cambiar todo el contenido HTML dentro de un elemento.

Asignación

Al usar el signo '=' estamos reemplazando el valor anterior por el nuevo texto entre comillas.

Actividad práctica 1:

Reto: Crea una página que pida el nombre del usuario y lo muestre en un título.

Crea un <h1> con id="saludo".
Usa let nombre = prompt("Tu nombre");
Selecciona el h1 y cambia su innerHTML.

Solución: Actividad 1 (HTML):

<body>
  <h1 id="saludo"></h1>
  <script>
    // El código JS va aquí
  </script>
</body>

Solución: Actividad 1 (JS):

let name = prompt("What is your name?");
let welcome = document.getElementById("saludo");
welcome.innerHTML = "Welcome to my site, " + name + "!";

Cambiando estilos (.style):

Además del texto, podemos cambiar cómo se ve un elemento:

elemento.style.color = "red";

elemento.style.fontSize = "40px";

Nota: Las propiedades de CSS en JS usan camelCase (fontSize en vez de font-size).

Seleccionando por Etiqueta:

document.getElementsByTagName("tag")

Este método selecciona TODOS los elementos de un mismo tipo (ej. todos los párrafos 'p').

Colecciones vs Elementos:

ID:

Devuelve un único objeto. Es como buscar a una persona por su número de cédula.

TagName:

Devuelve una colección (lista). Es como buscar a todas las personas que llevan camisa azul.

Acceso por índice [ ]:

Para usar un elemento de la colección, debemos usar su posición (empezando en 0):

let lista = document.getElementsByTagName("p");
lista[0].style.color = "blue"; // Primer párrafo
lista[1].style.color = "red";  // Segundo párrafo

Ejemplo resuelto: Múltiples Párrafos:

<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>

let paras = document.getElementsByTagName("p");
for(let i=0; i < paras.length; i++) {
  paras[i].style.color = "green";
}

Usamos un bucle para cambiar todos los elementos a la vez.

Actividad práctica 2:

Reto: Suma de Valores

Tienes dos números en etiquetas <span>. Calcula su suma y muéstrala en un párrafo.

Tip: Usa parseInt(elemento.innerHTML) para convertir texto en número.

Solución: Suma de Valores:

let n1 = document.getElementById("num_one");
let n2 = document.getElementById("num_two");

let val1 = parseInt(n1.innerHTML);
let val2 = parseInt(n2.innerHTML);

document.getElementById("result").innerHTML = val1 + val2;

Caso de estudio: Menu Opinion:

Imagina que quieres mostrar alertas con tus platos favoritos de una lista:

<ol>
  <li>Caesar Salad</li>
  <li>French Onion Soup</li>
  <li>Mac N Cheese</li>
</ol>

¿Cómo accederías al "Mac N Cheese"?

Resolviendo el Menú:

let lista = document.getElementsByTagName("li");

// El Mac N Cheese es el tercer elemento (índice 2)
alert("Mi plato favorito es: " + lista[2].innerHTML);

Reto avanzado: El párrafo más largo:

Dada una página con varios párrafos, el programa debe identificar cuál tiene más caracteres y mostrarlo.

Conceptos necesarios:

getElementsByTagName("p")
Propiedad .length de un String
Bucle for y comparaciones (if)

Lógica de resolución:

Paso 1:

Obtener todos los 'p' en una colección.

Paso 2:

Crear una variable 'max' para guardar el tamaño más grande.

Paso 3:

Recorrer la lista y comparar cada párrafo.

Solución: Párrafo más largo (Código):

let list = document.getElementsByTagName("p");
let max = list[0].innerHTML.length;
let pNum = 1;

for(let i = 0; i < list.length; i++) {
  if(list[i].innerHTML.length > max) {
    max = list[i].innerHTML.length;
    pNum = i + 1;
  }
}

let res = document.getElementById("longest");
res.innerHTML = "The longest paragraph is number " + pNum;

Errores comunes al usar el DOM:

null / undefined:

Ocurre cuando el ID no existe o está mal escrito (ej. "Bienvenida" vs "bienvenida").

Cargar antes:

Si el script se ejecuta antes de que el HTML cargue, no encontrará los elementos. ¡Usa el script al final!

Mejores prácticas:

Usa IDs descriptivos (ej. "boton-enviar" en lugar de "b1").
Guarda tus selecciones en variables con 'let'.
Asegúrate de que tus IDs sean únicos en toda la página.

Resumen del día:

Aprendimos:

¿Qué es el DOM?

Seleccionar por ID.

Seleccionar por Etiqueta.

Modificar contenido y estilo.

Recordatorio:

JavaScript no cambia el archivo HTML original, solo cambia la versión que el usuario ve en el navegador.

Quiz rápido: Pregunta 1:

¿Cuál es el método para seleccionar un único elemento específico?

A) getElementsByTagName

B) getElementById

Quiz rápido: Pregunta 2:

Si tengo 5 párrafos <p>, ¿qué devuelve getElementsByTagName("p")?

A) Solo el primer párrafo.

B) Una colección (lista) con los 5 párrafos.

Quiz rápido: Pregunta 3:

¿Qué propiedad cambia el contenido de una etiqueta?

.innerHTML

Actividad de reflexión:

"Piensa en tu sitio web favorito (Instagram, YouTube, Roblox). ¿En qué momentos crees que el DOM se está actualizando sin recargar la página?"

El futuro del desarrollo web:

Dominar el DOM es el primer paso para crear aplicaciones web reales, juegos en línea y herramientas interactivas que el mundo utiliza a diario.

Rutina: Conectar, Extender, Desafiar:

Conectar

¿Cómo se conecta esto con lo que ya sabías de HTML?

Extender

¿Qué nuevas ideas te han surgido hoy?

Desafiar

¿Qué te resulta todavía difícil de entender?

Tarea y recordatorios:

Completa la hoja de trabajo en clase.

Crea el archivo HTML con cambios de ID y TagName.

Enviar evidencias a: ntrujillo@csa.edu.ni

¿Alguna duda?

"La programación es el arte de decirle a otro humano lo que un computador debe hacer".

¡Gracias!

¡Nos vemos en la próxima sesión!

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Magia con el DOM

Guía Maestra del DOM Documento Docente

Presentación Magia del DOM Presentation Slides

Guía Práctica del DOM Student Worksheet

Guía Maestra del DOM Documento Docente

Presentación Magia del DOM Presentation Slides

Guía Práctica del DOM Student Worksheet

Guía Maestra del DOM Documento Docente Finalizado Docente Plan

Presentación Magia del DOM Presentation Slides Finalizado Presentacion Slides

Guía Práctica del DOM Student Worksheet Finalizado Guia Estudiante Worksheet

Similar Lessons

El Poder de JavaScript en HTML

Norman René Trujillo Zapata

Naming Knockout

Visconti Science

Earth Systems Review

Monique Milligan

Earth Systems Review

Monique Milligan

Detective Quest: The Missing Phone

Priyadarshini Bharath

Lunar Cycles and Lore

Kathleen Basoco

Precision Lab

The Viral Broadcast

Andrew Tarara

BandLab Beatmaker

Andrew Tarara

Paper to Playlist

Andrew Tarara

The Sound of Science

Andrew Tarara

Growth Celebration Flyers

Lydia McCracken

Earth Systems Review

Monique Milligan

Systems and Stability

Austin WIllis

Cell Energy Cycle

Austin WIllis

Diseño de interfaces móviles avanzadas

Norman René Trujillo Zapata

Diseño estructural y gestión visual avanzada

Norman René Trujillo Zapata

React Native Dinámico

Norman René Trujillo Zapata

Life Layers

Tricia Lucie

Interfaces Dinámicas en React Native

Norman René Trujillo Zapata

React Native UI Mastery

Norman René Trujillo Zapata

Diseño visual y layouts en React Native

Norman René Trujillo Zapata