Кекстаграм: расшифровка кода

Разберёмся подробнее в том коде, который мы написали. Вот один из фрагментов:

var toasterControl = document.querySelector('button.toaster');
if (toasterControl) {
  toasterControl.classList.remove('active');
}

var toasterControl — объявление переменной, подробно о переменных рассказывается в части «Основы программирования на Javascript».

document — это специальная переменная, в которой хранится корневой элемент HTML-документа. querySelector — это метод документа, который по указанному селектору ищет и возвращает первый найденный элемент, подходящий под селектор. Подробно о них рассказано в части «Знакомство с JavaScript в браузере».

У элементов, которые мы находим с помощью querySelector, есть свойство classList, в котором хранится список классов элемента. Подробно о нём рассказано в части «Знакомство с JavaScript в браузере».

Теперь немного отдохнём от JavaScript и создадим ещё один фильтр.