El método querySelectorAll: buscar varios elementos

¡Acertamos con las clases! Pero Cupcake siempre quiere más. Ahora tiene una exportación de productos de 1-Cupcake y nos pide actualizar todos los productos de la página. Necesitaremos un programa más completo:

¡Miau! Tenemos una tienda en línea con el HTML y el CSS listos. Hay que mostrar información actualizada sobre los productos en la interfaz: las ofertas especiales y la disponibilidad.

Los datos llegan en un arreglo de objetos llamado catalogData. Cada objeto corresponde a un producto y contiene las propiedades isAvailable (si el producto está disponible) e isSpecial (si tiene una oferta especial).

Cada estado del producto tiene su clase:

• product--available para un producto disponible;
• product--unavailable para un producto agotado;
• product--special para una oferta especial.

¡Espero los resultados! No te demores, ¡el reloj sigue corriendo!

Cada elemento del arreglo de datos corresponde a un producto de la página. Ya sabemos buscar elementos DOM y podríamos encontrarlos uno por uno con querySelector. Por ejemplo, con un ciclo:

for (…) {
  var product = document.querySelector('.product:nth-child(' + i + ')');
}

querySelector siempre devuelve solo el primer elemento que encuentra. En cada iteración tendríamos que volver a buscar el siguiente elemento en el árbol DOM. Repetir esa búsqueda tiene un costo.

Es más eficiente obtener todos los elementos antes del ciclo y recorrer la lista dentro del ciclo. Para eso usaremos querySelectorAll: devuelve una lista o colección con todos los elementos que coinciden con el selector.

Crearemos la función updateCards y trabajaremos dentro de ella. Buscaremos todos los productos de la página y comprobaremos que la búsqueda funciona.