Antes de que existiera querySelector, la clase Document ya tenía formas de encontrar elementos. Son más viejas y menos flexibles, pero las vas a seguir viendo todo el tiempo en código ajeno, así que conviene reconocerlas.

Estos tres métodos siempre devuelven lo mismo que pidas en singular o en grupo: getElementById te da un solo elemento, los otros dos te dan un grupo recorrible con for...of (igual que harías con un Array). Mira paso a paso cómo se arma:

Para resolver el problema de la lista de frutas, primero hay que decirle a JavaScript cuál elemento (o elementos) queremos tocar. Eso es justamente lo que hacen estos dos métodos — buscan, no modifican todavía nada.

A diferencia de getElementById/getElementsByClassName/getElementsByTagName que acabas de ver, querySelector acepta cualquier selector de CSS (id, clase, etiqueta, combinaciones, pseudo-clases) con una única sintaxis — por eso es la forma más usada hoy en día.

Ahora el problema de la encuesta: necesitas contar solo los checkboxes que la persona marcó, no todos los que existen en la página. Para eso, los selectores CSS incluyen pseudo-clases, como :checked, que filtra por un estado del elemento en este momento (marcado o no).

Mira primero, paso a paso, cómo se resuelve el problema completo (nombre de la primera fruta + cantidad marcada). Después te toca practicarlo tú en la pestaña siguiente.

Es el mismo problema que acabas de ver resuelto paso a paso. Ahora te toca escribirlo tú: usa querySelector para el nombre de la fruta, y querySelectorAll('.gusta:checked') para contar los marcados.

Para avisarle a la persona si acertó, hay que escribir un mensaje dentro de un elemento que ya existe. Estas son las dos formas de hacerlo:

Ya tienes el mensaje escrito. Para pintarlo de verde o de rojo, no le cambias el color directamente: le agregas o sacas una clase CSS, y es el CSS el que define cómo se ve esa clase. Cada elemento tiene una propiedad classList para manejar sus clases.

document.createElement("li") crea un elemento nuevo en memoria (todavía no se ve en la página). Le puedes poner texto con textContent antes de mostrarlo.

padre.appendChild(elemento) lo agrega como último hijo de "padre", y ahí aparece en pantalla. elemento.remove() lo saca del DOM directamente.

Un template literal se escribe con comillas invertidas (`) en vez de comillas simples o dobles. Dentro, insertas el valor de una variable con ${variable}.

También puedes poner expresiones dentro de ${ }, no solo variables sueltas: por ejemplo `Doble: ${puntos * 2}`.

Un problema clásico: cada vez que una familia suma un integrante nuevo, alguien tiene que anotar quién es su padre o madre, y esa persona nueva debe aparecer colgando de esa rama en el árbol genealógico.

El HTML no puede traer ya escritas a todas las personas que todavía no existen — así que el árbol tiene que crecer con código, cada vez que alguien aprieta "Agregar". Esto combina las tres cosas que acabas de aprender:

Los datos de un formulario HTML se leen o se escriben a través de la propiedad value de cada input seleccionado.

Y la misma propiedad funciona al revés: si el usuario ya escribió algo en el input, input.value te devuelve ese texto para que lo uses en tu código.

Ese valor casi siempre se combina con lo que ya sabes de createElement y for...of: recorres un Array de datos y, por cada uno, creas y agregas un elemento nuevo. Es exactamente el mismo patrón que usaste en el juego de parientes:

let padre = document.getElementById("personas");
let personas = ["HOMERO", "MARGE", "BART", "LISA", "MAGGIE"];

for (const persona of personas) {
  let li = document.createElement("li");
  li.innerHTML = persona;
  padre.appendChild(li);
}

Si en vez de nombres sueltos tienes objetos (con varias propiedades cada uno), un template literal te permite armar de una sola vez todo el HTML interno de cada tarjeta:

const productos = [
  { id: 1, nombre: "Arroz", precio: 125 },
  { id: 2, nombre: "Fideo", precio: 70 },
  { id: 3, nombre: "Pan",   precio: 50 },
  { id: 4, nombre: "Flan",  precio: 100 }
];

for (const producto of productos) {
  let tarjeta = document.createElement("div");
  tarjeta.innerHTML = `<h3>ID: ${producto.id}</h3>
    <p>Producto: ${producto.nombre}</p>
    <b>$ ${producto.precio}</b>`;
  document.body.appendChild(tarjeta);
}