JS
March 13, 2022

Найти элемент JS, метод querySelector. Удаление и добавление классов.

Находим элемент с помощью querySelector
Программа на JavaScript — это последовательность инструкций, которые указывают браузеру выполнить какие-то действия.
Команда это по сути, «найди и принеси элемент» . Называется МЕТОД— querySelector
document.querySelector('селектор');
Словом document обозначается веб-страница, к которой подключили скрипт. Неважно, как называется файл на самом деле, в JavaScript это всегда «документ».
Если это класс например, то его можно удалить.
Убираем класс методом classList.remove
элемент.classList.remove('класс');
в данном случае будет так:
document.querySelector('.page').classList.remove('light-theme');
Получается такой «паровозик»: нашли элемент, а потом убрали у него класс. Прочитался почти по-русски, слева направо!

Нахрена это вообще. Кнопка отключения светлой темы например. Светлая тема шаблона в классе css, мы ее скриптом сначала нашли через команду, потом удалили. Потом можно добавить аналогично classList.add('dark-theme'), точно также. Вот так, через поиск, потом удаление, а потом добавления другой у нас реализовано(криво, в учебных целях) переключение цветовой темы кнопкой.
Причем, переключение у пользователя в браузере. У нас в хтмл и css исходники не поменяются! И это часто надо делать - у юзера на компе что-то меняется, происходит какое-то действия типа подписки. А в исходниках сайта все остается.