Ir al contenido principal

Lección 7 · Autoevaluación

Cómo se usa

Esta página cubre todo lo de la lección 7: el DOM, seleccionar elementos, cambiar contenido y clases, y escuchar eventos.

Hay 9 preguntas y 3 ejercicios, con corrección inmediata.

Preguntas

Todavía sin contestar · 9 preguntas

El DOM y la selección

1. ¿Qué es el DOM?

Elegí una opción para verla

Es el árbol de objetos que el navegador arma a partir del HTML. JavaScript lo toca y la pantalla cambia.

2. ¿Qué devuelve document.getElementById("total") si no hay ningún elemento con ese id?

Elegí una opción para verla

Devuelve null. Por eso el <script> va al final del <body>: si el elemento todavía no existe, la búsqueda devuelve null y usarlo después da error.

3. ¿Qué diferencia hay entre querySelector("#total") y querySelectorAll(".precio")?

Elegí una opción para verla

querySelector devuelve el primer elemento que coincide; querySelectorAll devuelve todos.

Cambiar el contenido

4. ¿Para qué sirve elemento.textContent?

Elegí una opción para verla

textContent cambia el texto tal cual, sin interpretar etiquetas. Es la opción segura para datos de usuario.

5. ¿Qué ventaja tiene classList.add("text-success") sobre style.color?

Elegí una opción para verla

Cambiar clases mantiene los estilos en el CSS (un solo lugar) y respeta el modo claro/oscuro. Cambiar style directo mezcla diseño con JavaScript.

6. ¿Por qué innerHTML con datos del usuario es peligroso?

Elegí una opción para verla

innerHTML interpreta lo que se le pasa. Si viene del usuario, puede traer etiquetas o scripts y ejecutarse en su navegador (XSS). Para texto, textContent.

Eventos

7. ¿Qué hace boton.addEventListener("click", fn)?

Elegí una opción para verla

Registra un escucha: cada vez que ocurre el evento click en ese botón, se ejecuta la función.

8. ¿Qué hace document.createElement("li")?

Elegí una opción para verla

Crea el elemento en memoria. Para que aparezca hay que insertarlo, por ejemplo con appendChild.

9. ¿Por qué el <script> va al final del <body>?

Elegí una opción para verla

Para que cuando el JavaScript busque elementos, ya estén cargados. Si corre antes, getElementById devuelve null.

Ejercicios de práctica

Ejercicio 1

Escribí el HTML mínimo con un párrafo #total y un botón, y el JS que le cambie el texto al hacer clic.

<p id="total">$0</p>
<button id="cambiar">Cambiar</button>
<script src="app.js"></script>
const total = document.getElementById("total");
const boton = document.getElementById("cambiar");

boton.addEventListener("click", () => {
    total.textContent = "$350";
});

Ejercicio 2

Agregá un ítem a una lista #bandeja cada vez que se hace clic en un botón.

const bandeja = document.getElementById("bandeja");
const boton = document.getElementById("agregar");

boton.addEventListener("click", () => {
    const item = document.createElement("li");
    item.textContent = "Empanada";
    bandeja.appendChild(item);
});

Ejercicio 3

Explicá por qué este código falla: const total = document.getElementById("total"); total.textContent = "x";, con el <script> en el <head>.

Porque el script corre antes de que exista #total: getElementById devuelve null y null.textContent da error. Se arregla moviendo el <script> al final del <body>.

Cómo saber si está bien

Si acertaste 7 o más, el curso está completo. Practicá armando el panel del buffet: cada producto nuevo es un ejercicio de DOM y eventos.

Lo que hay que poder explicar

  • El DOM son los objetos de la página.
  • getElementById / querySelector; si no existe, null.
  • textContent para texto; classList para estilos.
  • addEventListener conecta un evento con una función.
  • createElement + appendChild agregan elementos.

Licencia. El material de esta página es elaboración propia de Prof Mauro Bobyk —a partir de las fuentes que detalla el pie del sitio— y se publica bajo una licencia Creative Commons BY-NC-SA 4.0.