В JavaScript существует несколько способов взаимодействия с атрибутами HTML-элементов. Методы

Стандартные HTML-атрибуты можно читать и изменять напрямую через свойства объекта HTMLElement, полученного через селекторы. Важно помнить о различиях в именах свойств и атрибутов (например,
Для управления CSS-классами элемента следует использовать интерфейс
Атрибуты, начинающиеся с префикса
getAttribute(), setAttribute(), hasAttribute() и removeAttribute() предоставляют универсальный способ управления атрибутами. 
Изображение носит иллюстративный характер
Стандартные HTML-атрибуты можно читать и изменять напрямую через свойства объекта HTMLElement, полученного через селекторы. Важно помнить о различиях в именах свойств и атрибутов (например,
defaultValue для атрибута value поля input), а также о чувствительности к регистру свойств. Для управления CSS-классами элемента следует использовать интерфейс
classList с методами add(), remove(), contains() и toggle(). Он позволяет удобно добавлять, удалять, проверять наличие и переключать классы. Атрибуты, начинающиеся с префикса
data-, доступны через свойство dataset объекта Element. Они позволяют хранить произвольные данные, доступные через свойства объекта dataset, имена которых соответствуют именам атрибутов без префикса data-.