Атрибуты и свойства

HTML-атрибуты — в исходном коде: <input value="5">. DOM-свойства — в объекте элемента: input.value. Они связаны, но НЕ идентичны. Атрибуты — начальные значения. Свойства — текущее состояние.

Разница между атрибутами и свойствами:

HTML Attribute (атрибут):

• Написан в исходном HTML: <input type="text" value="5">
• Доступен через: element.getAttribute('value')
• Значение ВСЕГДА строка
• Начальное значение

DOM Property (свойство):

• Свойство объекта элемента: element.value
• Текущее значение (может изменяться)
• Тип зависит от свойства (строка, число, boolean)

Пример: <input type="text" value="5">

input.getAttribute('value') // '5' (строка!) input.value // 5 (может быть числом)

input.value = 10; input.getAttribute('value') // всё ещё '5' (атрибут не изменился!) input.value // 10 (свойство изменилось)

Ключевые атрибуты/свойства:

• value:

- Атрибут: начальное значение - Свойство: текущее значение

• checked:

- Атрибут: 'checked' или отсутствует - Свойство: true/false

• disabled:

- Атрибут: 'disabled' или отсутствует - Свойство: true/false

• class:

- Атрибут: class="btn primary" - Свойство: element.className = 'btn primary' - Лучше: element.classList.add('btn')

• id:

- Атрибут: id="app" - Свойство: element.id = 'app'

Когда что использовать:

• getAttribute/setAttribute — для начальных значений
• element.property — для текущего состояния
• Для большинства свойств — используйте свойства (element.value)

Атрибут — как описание в анкете (начальные данные). Свойство — как текущее состояние в базе данных (может меняться). Вы заполнили анкету «возраст: 25», но в базе уже «возраст: 26».

**Самый простой:**

// HTML: <input type="text" value="5" id="myInput">

const input = document.getElementById('myInput');

// Атрибут (начальное значение):
console.log(input.getAttribute('value')); // '5'

// Свойство (текущее значение):
console.log(input.value); // '5'

// Изменяем свойство:
input.value = '10';
console.log(input.value);            // '10'
console.log(input.getAttribute('value')); // всё ещё '5'!

Атрибут не меняется при изменении свойства. Они независимы.

**Простой:**

// HTML: <input type="checkbox" checked>

const checkbox = document.querySelector('input[type=checkbox]');

// Атрибут:
console.log(checkbox.getAttribute('checked')); // '' (пустая строка)

// Свойство:
console.log(checkbox.checked); // true

// Снимаем галочку:
checkbox.checked = false;
console.log(checkbox.checked);            // false
console.log(checkbox.getAttribute('checked')); // всё ещё ''!

checked — boolean свойство. Атрибут — строка. Они работают по-разному.

**Реальный пример:**

// Практический пример: валидация формы
const emailInput = document.querySelector('#email');

// Проверяем текущее значение (свойство):
if (emailInput.value.includes('@')) {
  emailInput.classList.add('valid');
} else {
  emailInput.classList.add('invalid');
}

// Устанавливаем начальное значение (атрибут):
emailInput.setAttribute('placeholder', 'user@example.com');

// Проверяем обязательность (свойство):
console.log(emailInput.required); // true

Для работы с текущим состоянием — свойства. Для начальных значений — атрибуты.

**Неправильно:** Путать getAttribute и свойства

**Почему:** getAttribute возвращает строку. Свойство может быть числом, boolean и т.д.

**Правильно:** getAttribute('value') → '5' (строка). element.value → 5 (может быть числом).

**Неправильно:** Думать, что setAttribute меняет свойства

**Почему:** setAttribute меняет атрибут. Свойства могут не обновиться.

**Правильно:** Для текущего состояния — изменяйте свойства напрямую: element.value = 'новое'.

**Неправильно:** Использовать class вместо classList

**Почему:** element.className = 'btn primary' заменяет ВСЕ классы. classList.add — добавляет один.

**Правильно:** Используйте classList.add/remove/toggle для управления отдельными классами.

• Attribute — начальное значение в HTML. Property — текущее состояние.
• getAttribute всегда возвращает строку
• Свойства могут быть строками, числами, boolean
• Изменение свойства НЕ меняет атрибут
• Для текущего состояния — свойства

Назад: Вы умеете читать содержимое (D4) — теперь вы понимаете более глубокое различие атрибутов и свойств.

Вперёд: Следующий урок (D6) — манипуляции с DOM: создание, добавление и удаление элементов.