Атрибути vs властивості DOM-елемента

JavaScriptJunior~1 хв читання

Головна відмінність

Атрибут (attribute) - це те, що записано в HTML-коді.
Властивість (property) - це те, що зберігається в DOM-об'єкті в пам'яті JavaScript.

Простіше кажучи:

Атрибут - це те, що браузер прочитав з HTML. Властивість - це поточний стан елемента в JS.

Приклад

javascript

<input id="name" value="Alex">

javascript

const input = document.querySelector('#name');

console.log(input.getAttribute('value')); // "Alex" - з HTML
console.log(input.value);                 // "Alex" - поточна властивість

Тепер користувач вводить у поле нове значення, наприклад "Max":

javascript

console.log(input.getAttribute('value')); // все ще "Alex" (атрибут не змінюється)
console.log(input.value);                 // "Max" (властивість змінилася)

Підсумок: атрибут - "стартове значення", властивість - "поточний стан".

Атрибути - це частина HTML

Зберігаються у вихідному коді.
Отримати й змінити їх можна за допомогою:

javascript
element.getAttribute(name); element.setAttribute(name, value); element.hasAttribute(name); element.removeAttribute(name);

Властивості - це частина JS-об'єкта DOM

Існують як звичайні властивості об'єкта:

javascript
element.value element.checked element.id element.className
Зміна властивості може не змінювати атрибут (і навпаки).

Приклади, де видно різницю

Приклад 1: `checked`

javascript

<input type="checkbox" checked>

javascript

const box = document.querySelector('input');
console.log(box.getAttribute('checked')); // "": атрибут є
console.log(box.checked);                 // true: властивість активна

box.checked = false;

console.log(box.getAttribute('checked')); // все ще "" (атрибут не зник)
console.log(box.checked);                 // false (стан змінився)

Приклад 2: `class` і `className`

javascript

<div class="item"></div>

javascript

const el = document.querySelector('.item');

console.log(el.getAttribute('class')); // "item"
console.log(el.className);             // "item"

el.className = 'product';
console.log(el.getAttribute('class')); // "product", тут синхронно

Деякі атрибути синхронізуються із властивостями (наприклад, id, class), але не всі - наприклад, value, checked, selected часто розходяться.

Таблиця порівняння

Критерій	Атрибут (`getAttribute`)	Властивість (`element.prop`)
Де зберігається	У HTML-розмітці	У DOM-об'єкті в пам'яті
Коли задається	При завантаженні сторінки	У будь-який момент
Змінюється під час взаємодії?	Ні	Так
Повертає рядок?	Завжди рядок	Може бути будь-якого типу
Приклади	`id`, `class`, `href`	`value`, `checked`, `style`

Додатково

Деякі властивості взагалі не мають атрибутів, наприклад:

javascript

div.offsetWidth; // лише властивість, у HTML його немає

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.