Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Атрибути vs властивості DOM-елемента». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

- **Атрибут (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 його немає
```

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати349 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.