querySelector. querySelectorAll. addEventListener. classList. preventDefault.

Метод classList - механизм работы с классами

Метод classList позволяет выполнять различные действия с классами (и только ими).

Варианты использования:
element.classList.add('class'); - добавляет элементу класс.
element.classList.remove('class'); - удаляет класс.
element.classList.toggle('class'); - переключает класс: добавляет, если класса нет, и удаляет, если он есть.
Метод позволяет: изменить размер, повернуть, переместить и т.д. Всё зависит от css-правил для нового класса, который добавляется элементу.

Примечание
Несмотря на то, что в кавычках указан КЛАСС, точка в его начале в данном случае никогда НЕ СТАВИТСЯ!

classList.toggle

Пример
Напишем программу, которая будет скрывать и отображать изображение с классом pretty-image при кликах по нему мышкой.
В css пропишем правило для класса pretty-image указав ему свойство opacity: 0;
.image-hide {
opacity: 0;
transition: .3s;
}
---
В js используем метод classList.toggle
const image = document.querySelector('.pretty-image');
image.addEventListener('click', () => {
image.classList.toggle('image-hide');
});

classList.add и classList.remove

Пример
Часто стоит задача показывать или скрывать элемент кликом по кнопке, не являющейся частью данного элемента. Благодаря данным методам можно составить функцию, позволяющую отображать и скрывать изображение на странице кликом по кнопкам «Показать» и «Скрыть».
Используя метод поиска querySelector, найдём в документе кнопки с классами show и hide и изображение с классом .pretty-image. Присвоим результат поиска переменным show, hide и image.
const show = document.querySelector('.show');
const hide = document.querySelector('.hide');
const image = document.querySelector('.pretty-image');
---
Используем метод addEventListener для отлова кликов по кнопкам show и hide и выполнения переданной функции.
show.addEventListener('click', () => {});
hide.addEventListener('click', () => {});
---
Для кликов по кнопке hide в качестве функции укажем добавление класса image-hide к элементу image. Добавить класс позволяет метод classList.add
hide.addEventListener('click', () => {
image.classList.add('image-hide');
});
---
Для кликов по кнопке show в качестве функции укажем удаление класса image-hide у элемента image. Удалить класс позволяет метод classList.remove
show.addEventListener('click', () => {
image.classList.remove('image-hide');
});