Як працювати з атрибутами?

Робота з атрибутами 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-міток.