Scribd
Cargar
5 vistas

Practica 3.1JavaScriptBasico1

El documento es una práctica de programación web que introduce la manipulación del DOM con JavaScript, enfocándose en el uso de métodos como querySelector(), querySelectorAll() y getElementById(). Se detallan objetivos, instrucciones para crear una estructura HTML, y ejemplos de código para modificar dinámicamente el contenido de una página web. Además, incluye un cuestionario para evaluar el aprendizaje sobre los conceptos presentados.

Cargado por

samantharc0045
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
5 vistas

Practica 3.1JavaScriptBasico1

El documento es una práctica de programación web que introduce la manipulación del DOM con JavaScript, enfocándose en el uso de métodos como querySelector(), querySelectorAll() y getElementById(). Se detallan objetivos, instrucciones para crear una estructura HTML, y ejemplos de código para modificar dinámicamente el contenido de una página web. Además, incluye un cuestionario para evaluar el aprendizaje sobre los conceptos presentados.

Cargado por

samantharc0045
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

Uso de querySelector(), querySelectorAll() y getElementById para manipulación


dinámica de contenido

Introducción:
¿Qué es el DOM?
El DOM (Document Object Model) es un estándar que define la estructura de los
documentos HTML y XML como un árbol de objetos. Cada elemento de la página se
convierte en un nodo que se puede manipular mediante JavaScript. Esta capacidad de
interactuar con los elementos de la página es fundamental para crear experiencias web
dinámicas y responsivas.

¿Por qué aprender a manipular el DOM?


La manipulación del DOM es una habilidad esencial para cualquier desarrollador web,
ya que permite:
• Actualizar contenido dinámicamente sin recargar la página
• Modificar estilos y atributos de elementos
• Responder a eventos del usuario (clics, teclas, etc.)
• Crear interfaces interactivas y animaciones

1. Objetivo
• Comprender el funcionamiento del DOM (Document Object Model) y su manipulación
mediante JavaScript.
• Aprender a usar los métodos querySelector(), querySelectorAll() y
getElementById() para seleccionar y modificar elementos en una página web.
• Implementar cambios dinámicos en párrafos que muestran información sobre las
actividades académicas de un estudiante.

2. Instrucciones Generales
1. Crea una estructura HTML que contenga:
• Un título <h1>.
• Un conjunto de párrafos (<p>) que muestren información sobre las actividades
académicas de un estudiante.
• Un botón para modificar dinámicamente el contenido de los párrafos mediante
JavaScript.
Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

2. Usar querySelector() para modificar el primer párrafo directamente desde JavaScript.


3. Usar querySelectorAll() para recorrer todos los párrafos y realizar una modificación
masiva (por ejemplo, cambiar el color de texto o añadir una clase).
4. Agrega efectos visuales mediante CSS para reflejar los cambios dinámicos realizados
con JavaScript mediante getElementById()

Gráfica del DOM


La siguiente gráfica muestra cómo el DOM estructura los elementos HTML de la práctica:

<HTML>

<head> <body>

<button
<p class="info"> <p class="info"> <p class="info">
<meta> <tilte> <link> <h1> id="btnCambiar"
(Párrafo 1) (Párrafo 2) (Párrafo 3)
> (Botón)

Descripción de la estructura:
• html: Elemento raíz que contiene todos los elementos de la página.
• head: Contiene información sobre el documento, como metadatos y hojas de estilo.
• body: Contiene el contenido visible de la página (título, párrafos y botón).
• h1: Título de la página.
• p: Párrafos de contenido con la clase .info.
• button: Botón para ejecutar la manipulación dinámica del DOM.

3. Proceso a Seguir

Paso 1: Crear el archivo HTML (index.html)


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Manipulación del DOM_1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Actividades Académicas del Estudiante</h1>

<p class="info">Participación en el club de robótica.</p>


Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

<p class="info">Asistencia a la conferencia sobre Inteligencia


Artificial.</p>
<p class="info">Proyecto de desarrollo web con HTML, CSS y
JavaScript.</p>

<button id="btnCambiar">Actualizar Actividades</button>

<script src="script.js"></script>
</body>
</html>

Paso 2: Crear el archivo CSS (styles.css)


body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1 {
color: #2c3e50;
}

p {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
transition: background-color 0.3s ease;
}

/* Clase para resaltar párrafos */


.resaltado {
background-color: #f39c12;
color: white;
}

Paso 3: Crear el archivo JavaScript (script.js)


// Seleccionar el primer párrafo con querySelector()
const primerParrafo = document.querySelector('.info');

// Modificar el contenido del primer párrafo


primerParrafo.textContent = 'Nueva información: Curso avanzado de
robótica.';

// Seleccionar todos los párrafos con querySelectorAll()


const parrafos = document.querySelectorAll('.info');
Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

// Recorrer todos los párrafos y aplicar cambios


parrafos.forEach((parrafo, index) => {
parrafo.addEventListener('click', () => {
// Cambiar el color de fondo y texto al hacer clic
parrafo.classList.toggle('resaltado');
});
});

// Evento para modificar todos los párrafos al hacer clic en el botón


document.getElementById('btnCambiar').addEventListener('click', () => {
parrafos.forEach((parrafo, index) => {
parrafo.textContent = `Actividad ${index + 1}: Información
actualizada`;
});
});

4. Descripción de los elementos JavaScript:

Elemento Descripción Ejemplo


querySelector() Selecciona el primer elemento que const primerParrafo = document.querySelector('.info');
coincide con el selector especificado.
querySelectorAll() Selecciona todos los elementos que const parrafos = document.querySelectorAll('.info');
coinciden con el selector especificado.
Devuelve una NodeList.
getElementById() Selecciona un elemento por su atributo const boton = document.getElementById('btnCambiar');
id. Devuelve el primer elemento que
coincide con el valor especificado.
textContent Permite modificar el contenido textual primerParrafo.textContent = 'Nueva información';
de un elemento HTML.
addEventListener() Añade un evento que se ejecutará al btnCambiar.addEventListener('click', () => {...})
hacer clic en el botón o párrafo.
classList.toggle() Añade o elimina una clase CSS al parrafo.classList.toggle('resaltado');
elemento seleccionado.
forEach() Permite recorrer todos los elementos de parrafos.forEach(parrafo => {...})
una lista y ejecutar una función sobre
cada uno.
=> (Arrow Define una función anónima y simplifica Ejemplo:
Function) la sintaxis de las funciones en javascript<br>parrafos.forEach(parrafo => {<br>
JavaScript. Se utiliza para recorrer listas parrafo.style.color = 'blue';<br>});<br>
o definir comportamientos en eventos.
Función Anónima Es una función que no tiene nombre y se Ejemplo:
puede usar directamente como javascript<br>const suma = function(a, b) {<br> return a +
argumento en métodos como forEach() b;<br>};<br>console.log(suma(5, 3)); // Salida: 8<br>
o addEventListener(). Las arrow
functions (=>) son una forma
simplificada de definir funciones
anónimas.
Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

Ejemplo de función anónima tradicional y con arrow function:


Función anónima tradicional:
CopiarEditar
const saludo = function() {
console.log("Hola, esta es una función anónima");
};
saludo();

Función arrow (función anónima simplificada):


const saludo = () => {
console.log("Hola, esta es una arrow function");
};
saludo();

• Una función anónima es una función que no tiene un nombre definido y se asigna
generalmente a una variable o se pasa como argumento a otro método.
• Las funciones arrow (=>) son una forma moderna y simplificada de definir funciones
anónimas.
• Las funciones arrow permiten escribir funciones más compactas y con una mejor
gestión del contexto (this).

5: Realizar modificaciones para consolidar el aprendizaje

Realiza las siguientes modificaciones para aplicar lo que has aprendido:


1. Modificar el diseño y comportamiento de los párrafos:
• Cambia el color de los párrafos al pasar el cursor sobre ellos utilizando JavaScript y el
método addEventListener() para el evento mouseover.
• Usa una función arrow (=>) para definir el comportamiento.
Pasos:
• Usar forEach() para recorrer los párrafos.
• Agregar un eventListener para detectar el evento mouseover.
• Dentro de la función flecha (=>), aplica el cambio de color usando la propiedad style.
Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

2. Añadir un nuevo botón para restablecer el diseño original:


• Crear un botón adicional que, al hacer clic, restablezca el color de los párrafos a su
valor original.
• Utilizar getElementById() para seleccionar el botón y funciones arrow para definir el
evento.
Pasos:
• Usar document.createElement() para crear el botón.
• Emplear appendChild() para agregar el botón.
• Aplicar forEach() para recorrer los párrafos y restaurar el color original.

3. Crear un nuevo párrafo dinámicamente desde JavaScript:


• Usa document.createElement() para crear un nuevo párrafo y appendChild() para
insertarlo en el DOM.
• El párrafo debe contener un texto personalizado y cambiar de color al hacer clic sobre
él utilizando classList.toggle() y addEventListener().
Pasos:
• Usa document.createElement() para generar el párrafo.
• Usa appendChild() para agregarlo al body.
• Usa addEventListener() para agregar el evento y classList.toggle() para cambiar el
color.
Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

6.- Cuestionario

1. ¿Cuál de las siguientes opciones selecciona el primer elemento que coincide con el selector
especificado en el DOM?
• A) getElementById()
• B) querySelector()
• C) querySelectorAll()
• D) getElementsByClassName()

2. ¿Qué método devuelve una lista de nodos que coinciden con un selector CSS?
• A) getElementById()
• B) querySelector()
• C) querySelectorAll()
• D) getElementsByTagName()

3. ¿Qué propiedad permite modificar el contenido textual de un elemento HTML?


• A) innerHTML
• B) classList
• C) textContent
• D) setAttribute

4. ¿Cuál de los siguientes métodos añade un evento a un elemento HTML?


• A) getElementById()
• B) addEventListener()
• C) innerHTML
• D) classList.toggle()

5. ¿Qué método añade o elimina una clase de un elemento HTML?


• A) innerHTML
• B) getElementById()
• C) classList.toggle()
• D) addEventListener()

6. ¿Cuál de las siguientes afirmaciones sobre getElementById() es correcta?


Instituto Tecnológico de Orizaba

Departamento de Sistemas y Computación

PERÍODO: Enero – Junio 2025 Unidad 3


NOMBRE DEL DOCENTE: Patricia Quitl González
ASIGNATURA: Programación Web
Instrumento: Práctica: Introducción a la Manipulación del DOM con JavaScript

• A) Selecciona todos los elementos con una clase específica.


• B) Selecciona el primer elemento que coincide con un selector CSS.
• C) Selecciona un elemento por su atributo id.
• D) Devuelve una lista de nodos que coinciden con el atributo id.

7. ¿Cuál es la forma correcta de definir una arrow function en JavaScript?


• A) const suma = (a, b) => { return a + b; }
• B) const suma = => (a, b) { return a + b; }
• C) const suma = function(a, b) => { return a + b; }
• D) const suma = (a, b) -> { return a + b; }

8. ¿Qué método permite recorrer una lista de nodos y ejecutar una función sobre cada uno?
• A) forEach()
• B) map()
• C) reduce()
• D) filter()

9. ¿Cuál de las siguientes afirmaciones sobre una función arrow (=>) es verdadera?
• A) No puede usarse en métodos como forEach()
• B) No tiene acceso al valor de this del contexto externo
• C) Es una forma simplificada de definir una función anónima
• D) No permite el uso de parámetros

10. ¿Cuál de las siguientes líneas selecciona correctamente un botón mediante su id y le agrega
un evento de clic?
• A) document.getElementById('btn').addEventListener('click', () => {...});
• B) document.getElementsByClassName('btn').addEventListener('click', () => {...});
• C) document.querySelectorAll('#btn').addEventListener('click', () => {...});
• D) document.querySelector('#btn').addEventListener{'click', () => {...}};

También podría gustarte