Мы нашли элементы, а что дальше? Теперь их нужно как-то визуально изменить. К счастью, мы обнаружили, что верстальщик заботливо подготовил стили для разных состояний товаров. В style.css можно найти разные CSS-правила:

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

Хотя, зачем гадать? Давайте добавим классы и посмотрим, что выходит.

Так как DOM-элементы — объекты, все они имеют набор свойств и методов. Среди свойств DOM-элементов — объект classList. Он содержит методы для управления классами DOM-элемента, в том числе и метод add(). С его помощью мы можем указать, какой класс хотим добавить элементу.

Синтаксис простой. Сначала мы указываем DOM-элемент, которому хотим добавить класс, затем обращаемся к свойству classList через точку и вызываем метод add(), передав ему строку с необходимым классом. Обратите внимание, что точку перед названием класса ставить не нужно. В итоге добавление класса выглядит так:

// Когда ищем элемент по классу, используем точку
var product = document.querySelector('.product');

// Но когда добавляем класс, точки нет!
product.classList.add('product--sale');

Результат работы classList.add() такой же, как при ручном добавлении класса в разметку:

<!-- Исходное состояние разметки -->
<li class="product">
  …
</li>

<!-- Состояние после вызова classList.add -->
<li class="product product--sale">
  …
</li>

Добавим найденным элементам класс товара, которого нет в наличии, и класс спецпредложения.