Получилось, мы угадали с классами! Но Кексу всегда мало. Теперь у него есть выгрузка с товарами из 1-Кекс и он просит обновлять все товары на странице. Придётся писать более сложную программу:

Мяу! Есть интернет-магазин с готовой вёрсткой. Нужно показывать в интерфейсе актуальную информацию о товарах: спецпредложения и наличие на складе.

Данные приходят в виде массива объектов catalogData. Каждый объект соответствует одному товару и содержит свойства isAvailable (в наличии товар или нет) и isSpecial (является ли товар спецпредложением или нет).

Для каждого состояния товара есть соответствующий класс:

• product--available для товара в наличии;
• product--unavailable соответствует товару, которого в наличии нет;
• product--special для спецпредложения.

Жду результата! Не задерживайся, часики тикают!

Каждый элемент массива с данными соответствует какому-то товару на странице. Мы уже умеем искать DOM-элементы и могли бы находить товары по одному с помощью querySelector. Например, используя цикл:

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

Метод querySelector устроен так, что всегда возвращает только первый найденный элемент. Поэтому на каждой итерации приходилось бы запускать поиск очередного элемента по DOM-дереву. Такой поиск — довольно дорогая операция.

Намного оптимальней получить список всех элементов до цикла, а внутри цикла этот список перебирать. В этом нам поможет метод querySelectorAll, который возвращает не первый найденный элемент, а список (коллекцию) всех элементов, подходящих по селектору.

Создадим функцию updateCards, в которой и будем вести работу над задачей. Найдём все товары на странице и убедимся, что поиск работает верно.