Пошук уроків, статей та іншого контенту
Навчитеся читати, додавати, змінювати й видаляти HTML-атрибути та data-властивості.
HTML-атрибути задають додаткові властивості елементів. Вони записуються у відкривальному тегу:
<button id="save-button" class="button" type="button">
Зберегти
</button>У цьому прикладі:
id — ідентифікатор елемента;
class — CSS-клас;
type — тип кнопки;
значення кожного атрибута записане після символу =.
JavaScript дає змогу:
прочитати атрибут;
перевірити його наявність;
додати або змінити атрибут;
видалити атрибут;
працювати зі спеціальними data-*-атрибутами.
getAttribute()Метод getAttribute() повертає значення атрибута:
const button = document.querySelector('button');
const buttonId = button.getAttribute('id');
console.log(buttonId);Якщо HTML має такий вигляд:
<button id="save-button">Зберегти</button>результатом буде рядок "save-button".
Назва атрибута передається як аргумент:
const link = document.querySelector('a');
const address = link.getAttribute('href');
const target = link.getAttribute('target');
console.log(address);
console.log(target);Якщо атрибута не існує, getAttribute() повертає null:
const image = document.querySelector('img');
const alternativeText = image.getAttribute('alt');
if (alternativeText === null) {
console.log('Атрибут alt відсутній');
}hasAttribute()Метод hasAttribute() перевіряє, чи є атрибут у елемента. Він повертає true або false:
const input = document.querySelector('input');
if (input.hasAttribute('required')) {
console.log('Поле є обов’язковим');
}Цей метод перевіряє саме наявність атрибута, а не його значення.
setAttribute()Метод setAttribute() додає атрибут або змінює його, якщо атрибут уже існує:
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');Перший аргумент — назва атрибута, другий — його значення.
Якщо атрибута не було, він буде доданий:
const title = document.querySelector('h1');
title.setAttribute('data-status', 'active');Результат у HTML буде приблизно таким:
<h1 data-status="active">Заголовок</h1>Якщо атрибут уже існував, його значення зміниться:
const image = document.querySelector('img');
image.setAttribute('alt', 'Фотографія користувача');Значення, передане в setAttribute(), зберігається як текст:
const element = document.querySelector('.counter');
element.setAttribute('data-count', 10);
console.log(element.getAttribute('data-count')); // "10"Навіть якщо передати число 10, getAttribute() поверне рядок "10".
За потреби значення можна перетворити назад на число:
const count = Number(element.getAttribute('data-count'));
console.log(count + 5); // 15Для видалення атрибута використовується removeAttribute():
const link = document.querySelector('a');
link.removeAttribute('target');Після цього атрибут target буде відсутній у елемента.
Видалення неіснуючого атрибута не спричиняє помилки:
link.removeAttribute('title');Деякі HTML-атрибути є булевими. Для них важлива сама наявність атрибута, а не його значення.
Приклади:
disabled;
checked;
selected;
required;
readonly;
multiple.
<input type="text" required>
<button type="button" disabled>Надіслати</button>Щоб вимкнути кнопку через атрибут:
const button = document.querySelector('button');
button.setAttribute('disabled', '');Щоб знову зробити кнопку доступною:
button.removeAttribute('disabled');Перевірити наявність булевого атрибута можна так:
if (button.hasAttribute('disabled')) {
console.log('Кнопка вимкнена');
}Для булевих атрибутів не потрібно записувати значення "true" або "false":
// Наявність атрибута вимикає кнопку
button.setAttribute('disabled', 'false');
// Видалення атрибута вмикає кнопку
button.removeAttribute('disabled');У першому випадку кнопка все одно буде вимкнена, бо атрибут disabled існує.
HTML-атрибути та властивості DOM пов’язані, але це не одне й те саме.
Атрибут можна прочитати через getAttribute():
const input = document.querySelector('input');
const valueFromAttribute = input.getAttribute('value');Для багатьох стандартних властивостей є прямий доступ через крапку:
const currentValue = input.value;Властивість value може змінитися під час роботи програми, коли користувач вводить текст. Початковий атрибут value при цьому може залишитися незмінним.
Для булевих властивостей зручно використовувати значення true і false:
const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.checked = true;
checkbox.checked = false;Те саме через атрибути виглядає менш зручно:
checkbox.setAttribute('checked', '');
checkbox.removeAttribute('checked');Для класу та ідентифікатора також є властивості:
const element = document.querySelector('.card');
console.log(element.id);
console.log(element.className);Водночас атрибути можна читати універсально:
console.log(element.getAttribute('id'));
console.log(element.getAttribute('class'));attributesУсі атрибути елемента можна переглянути через властивість attributes:
const link = document.querySelector('a');
console.log(link.attributes);Це колекція атрибутів. Наприклад, окремий атрибут можна отримати за назвою:
const classAttribute = link.attributes.getNamedItem('class');
if (classAttribute !== null) {
console.log(classAttribute.value);
}У повсякденному коді зазвичай достатньо getAttribute(), setAttribute() та removeAttribute().
data-*-атрибутиАтрибути, назви яких починаються з data-, призначені для зберігання додаткових даних у HTML:
<article
class="product"
data-product-id="42"
data-product-category="books">
JavaScript для початківців
</article>Такі атрибути можна читати звичайними методами:
const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const category = product.getAttribute('data-product-category');
console.log(productId); // "42"
console.log(category); // "books"datasetДля роботи з data-*-атрибутами зручніше використовувати властивість dataset.
const product = document.querySelector('.product');
console.log(product.dataset.productId);
console.log(product.dataset.productCategory);Назва перетворюється за таким правилом:
data-product-id → dataset.productId;
data-user-name → dataset.userName;
data-status → dataset.status.
data-*const product = document.querySelector('.product');
console.log(product.dataset.productId);
product.dataset.status = 'available';Після присвоєння в HTML з’явиться або зміниться атрибут:
data-status="available"data-*const product = document.querySelector('.product');
product.dataset.price = '599';Це створить атрибут:
data-price="599"Як і звичайні атрибути, значення dataset є рядками:
const price = Number(product.dataset.price);
console.log(price + 100);data-*Для видалення властивості dataset використовується оператор delete:
delete product.dataset.status;Або можна використати removeAttribute():
product.removeAttribute('data-price');У цьому прикладі кнопка змінює статус товару. Статус зберігається в data-status, а текст кнопки та підпис оновлюються через JavaScript.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Робота з атрибутами</title>
<style>
.product {
max-width: 320px;
padding: 16px;
border: 1px solid #ccc;
border-radius: 8px;
font-family: sans-serif;
}
.product[data-status="available"] {
border-color: green;
}
.product[data-status="unavailable"] {
border-color: crimson;
}
button {
margin-top: 12px;
padding: 8px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<article
class="product"
data-product-id="42"
data-status="available">
<h1>JavaScript для початківців</h1>
<p>
Статус:
<strong class="status">Доступний</strong>
</p>
<button type="button" class="toggle-button">
Зробити недоступним
</button>
</article>
<script>
const product = document.querySelector('.product');
const statusElement = product.querySelector('.status');
const toggleButton = product.querySelector('.toggle-button');
toggleButton.addEventListener('click', () => {
const currentStatus = product.dataset.status;
if (currentStatus === 'available') {
product.dataset.status = 'unavailable';
statusElement.textContent = 'Недоступний';
toggleButton.textContent = 'Зробити доступним';
} else {
product.dataset.status = 'available';
statusElement.textContent = 'Доступний';
toggleButton.textContent = 'Зробити недоступним';
}
});
console.log('Ідентифікатор товару:', product.dataset.productId);
console.log('Поточний статус:', product.getAttribute('data-status'));
</script>
</body>
</html>У цьому прикладі:
dataset.status читає значення data-status;
присвоєння product.dataset.status змінює атрибут;
CSS реагує на значення data-status;
textContent змінює текст елементів;
getAttribute() використовується для читання атрибута напряму.
const element = document.querySelector('.item');
element.setAttribute('data-count', 5);
console.log(element.getAttribute('data-count') === 5); // falseРезультат false, тому що атрибут повертається як рядок.
Правильно:
const count = Number(element.getAttribute('data-count'));
console.log(count === 5); // truefalse для вимкнення булевого атрибутаbutton.setAttribute('disabled', false);Кнопка залишиться вимкненою, бо атрибут все ще існує.
Правильно:
button.removeAttribute('disabled');datasetДля data-user-id використовується dataset.userId, а не dataset.user-id:
const userId = element.dataset.userId;Варіант із дефісом є некоректним синтаксисом JavaScript.
class і classNameАтрибут у HTML називається class:
element.getAttribute('class');А DOM-властивість називається className:
element.className;Обидва варіанти можуть бути корисними, але їхні назви відрізняються.
element.setAttribute('title', '');Це не видаляє атрибут, а залишає його з порожнім значенням.
Для повного видалення потрібно використовувати:
element.removeAttribute('title');getAttribute(name) читає значення атрибута або повертає null.
hasAttribute(name) перевіряє наявність атрибута.
setAttribute(name, value) додає або змінює атрибут.
removeAttribute(name) видаляє атрибут.
Значення HTML-атрибутів, отримані через getAttribute(), є рядками.
Булеві атрибути працюють за принципом наявності: атрибут є — можливість увімкнена або вимкнена.
data-*-атрибути зручно читати й змінювати через dataset.
data-user-id відповідає властивості dataset.userId.
Для зміни стану елементів часто зручніше використовувати DOM-властивості, наприклад disabled, checked або value.