Как работать с атрибутами?

Работа с атрибутами HTML-элементов в JavaScript позволяет динамически управлять поведением, состоянием и внешним видом компонентов страницы. Для этого существует стандартный набор методов и свойств, которые дают полный контроль над любыми стандартными и пользовательскими атрибутами.

Базовые манипуляции выполняются с помощью методов getAttribute() и setAttribute(). Метод getAttribute(name) принимает имя атрибута в виде строки и возвращает его текущее значение. Если такого атрибута у элемента нет, метод вернет null. Метод setAttribute(name, value) позволяет установить новое значение для указанного атрибута или создать его, если он еще не существовал. Для удаления ненужных атрибутов используется метод removeAttribute(name), который полностью стирает указанный атрибут из разметки элемента. Быстро проверить наличие атрибута можно с помощью метода hasAttribute(name), который возвращает булево значение true или false.

Особый интерес представляют пользовательские атрибуты, которые в современном HTML принято называть через префикс data- (например, data-user-id, data-role). Для удобной работы с ними в JavaScript предусмотрено специальное свойство dataset. Оно автоматически преобразует все data- атрибуты элемента в объект сcamelCase-нотацией. Например, если у вас есть атрибут data-user-id, вы можете получить или изменить его значение напрямую через свойство el.dataset.userId. Это избавляет от необходимости постоянно вызывать методы getAttribute и setAttribute, делая код более чистым и читаемым.

На практике эти инструменты применяются повсеместно: от передачи идентификаторов записей из базы данных в обработчики кликов до хранения состояния интерфейса прямо в разметке. Использование dataset является современным стандартом для кастомных данных, в то время как классические методы getAttribute и setAttribute незаменимы при работе со стандартными атрибутами вроде href, src, disabled или aria-меток.