Dominando el DOM Plan de Lección
Título de la lección:
Usando el DOM.
Etapa de aprendizaje de alta calidad:
Adquisición, demostración.
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'.
Breve descripción de la lección:
Se introduce a los estudiantes en el concepto del 'Document Object Model' como puente fundamental entre el código estático de HTML y la programación dinámica que permite la interactividad. Esta sesión de clases busca despertar curiosidad al revelar que la página que se visualiza en pantalla no es una estructura fija, sino un modelo vivo capaz de transformarse mediante instrucciones directas y lógicas.
A través de ejemplos prácticos, se explora la manera de seleccionar y alterar elementos específicos o grupos de ellos dentro del documento. El propósito consiste en sentar las bases para interacciones más complejas en el futuro, manteniendo un enfoque en la simplicidad para que el avance de cada estudiante resulte natural y motivador.
Se cuida especialmente la progresión del conocimiento, reconociendo que este paso representa el primer encuentro real con la manipulación dinámica del contenido web. Por ello, el docente prioriza la claridad conceptual y la observación inmediata de los resultados tras cada cambio realizado en el código.
Método de evaluación/logro:
Al finalizar, los estudiantes habrán adquirido competencias técnicas para seleccionar y modificar elementos HTML mediante métodos fundamentales del DOM. Se demostrará la comprensión mediante la creación de un script capaz de alterar al menos un elemento por su identificador único y varios elementos mediante su etiqueta, además de explicar verbalmente la función esencial que cumple el DOM en este proceso.
Notas de tarea:
Como asignación para realizar fuera de la clase, se solicita la creación de un archivo HTML con JavaScript integrado que modifique el texto y el estilo de un párrafo específico mediante 'getElementById'.
Asimismo, se debe cambiar el color de diversos elementos de forma simultánea utilizando 'getElementsByTagName'. Se requiere incluir comentarios detallados en el código que expliquen la lógica detrás de cada paso realizado.
Documentos y materiales de referencia:
• Curso de Javascript desde cero 23 - getElementById: explicación detallada del método para seleccionar elementos únicos y realizar modificaciones prácticas en el contenido.
• 04 Cómo seleccionar elementos por ID con getElementById: tutorial que profundiza en la manipulación dinámica de la interfaz de usuario mediante JavaScript.
• Qué es el DOM: el Modelo de Objeto de Documento explicado: guía técnica que describe la estructura de árbol del DOM y su importancia en el desarrollo web moderno.
• Introducción a la manipulación del DOM: artículo educativo que aborda los conceptos básicos de acceso y edición de nodos en un documento HTML.
Actividades:
Etapa de aprendizaje de alta calidad:
Adquisición, demostración.
Breve descripción de las actividades o ruta de aprendizaje:
Se inicia la sesión de clases con una explicación guiada donde el docente presenta un documento HTML simple. Se utiliza la analogía de un títere para explicar el funcionamiento del DOM: el código HTML representa el cuerpo del títere, mientras que el DOM actúa como los hilos invisibles que permiten mover cada parte. JavaScript es el titiritero que tira de esos hilos para cambiar la posición, el color o el mensaje del títere en tiempo real sin necesidad de reconstruir el cuerpo desde cero.
Posteriormente, los estudiantes proceden a crear un archivo HTML básico que incluya diversos elementos identificados con atributos 'id' y etiquetas repetidas. Se instruye en la inclusión de una etiqueta 'script' antes del cierre del cuerpo del documento para escribir el código necesario. Se utiliza el comando 'document.getElementById' para seleccionar un párrafo específico y transformar su contenido interior mediante la propiedad 'innerHTML' o alterar su apariencia visual con 'style.color'.
En la siguiente fase, se pone en práctica el uso de 'document.getElementsByTagName' para obtener una colección de elementos similares, como una lista de párrafos o elementos de una lista. Mediante la implementación de un bucle sencillo, se modifica el estilo de cada uno de ellos de manera colectiva, permitiendo que cada estudiante observe cómo los cambios se reflejan inmediatamente al actualizar el navegador.
Finalmente, se invita a los estudiantes a integrar ambos métodos en un mismo script. En este punto, cada estudiante debe demostrar su comprensión al describir los efectos producidos en su propia página, vinculando las acciones realizadas con el concepto del DOM como representación viva del documento. Se fomenta un espacio de reflexión donde se explica la necesidad de estas herramientas para construir experiencias digitales dinámicas.
Estándares ISTE para estudiantes:
4. Diseñador innovador: Los estudiantes utilizan una variedad de tecnologías en el proceso de diseño para identificar y resolver problemas, creando soluciones nuevas, útiles e imaginativas. Los estudiantes:
- • 4.a. Conocen y utilizan un diseño de proceso deliberado para generar ideas, probar teorías, crear artefactos innovadores o resolver problemas auténticos.
- • 4.b. Seleccionan y utilizan herramientas digitales para planificar y gestionar un proceso de diseño que toma en consideración las restricciones y los riesgos calculados.
- • 4.c. Desarrollan, prueban y refinan prototipos como parte de un diseño de procesos cíclico.
- • 4.d. Muestran tolerancia para la ambigüedad, la perseverancia y la capacidad para trabajar con problemas abiertos.
5. Pensador computacional: Los estudiantes desarrollan y emplean estrategias para comprender y resolver problemas de forma tal que aprovechan el poder de los métodos tecnológicos para desarrollar y probar soluciones. Los estudiantes:
- • 5.a. Formulan definiciones de problemas adecuadas para métodos asistidos por la tecnología, tales como análisis de datos, modelos abstractos y pensamiento algorítmico en la exploración y búsqueda de soluciones.
- • 5.b. Colectan datos o identifican conjuntos de datos relevantes, utilizan herramientas digitales para analizarlos y representar los datos en diferentes formas, para facilitar la resolución de problemas y la toma de decisiones.
- • 5.c. Separan los problemas en partes, extraen información clave y desarrollan modelos descriptivos para comprender sistemas complejos o facilitar la resolución de problemas.
- • 5.d. Comprenden cómo funciona la automatización y utilizan el pensamiento algorítmico para desarrollar una secuencia de pasos, para crear y probar soluciones automatizadas.
