В чём разница между «атрибутом» и «свойством» в DOM?

Базовое понимание

Атрибуты задаются в HTML и дают начальные значения. Свойства — часть DOM-объекта и отражают текущее состояние элемента.

На собеседовании важно не путать: «что написано в разметке» ≠ «что сейчас в объекте».

Атрибут vs свойство

Классика — <input>:

const input = document.querySelector("input");

// HTML: <input value="hello">
input.getAttribute("value"); // "hello" — атрибут (начальное)
input.value;                 // то, что сейчас в поле (свойство)

input.value = "typed by user";
input.getAttribute("value"); // часто всё ещё "hello"

Атрибут value задал старт; свойство value меняется при вводе.

Синхронизация не всегда 1:1

• Для многих атрибутов есть одноимённые свойства (id, href, …).
• class в HTML → свойство className / classList.
• checked, disabled — boolean-свойства; атрибут без значения тоже «включает» флаг.

el.setAttribute("disabled", "");
el.disabled; // true

el.disabled = false;
el.hasAttribute("disabled"); // обычно false после снятия

Как отвечать на собеседовании

1. Атрибут — разметка / начальное значение.
2. Свойство — живое состояние в DOM.
3. Пример с input.value.
4. Для чтения/записи текущего UI-состояния чаще смотрят на свойства.

Итог: атрибут — «как объявили», свойство — «как есть сейчас». Для интерактивных контролов ориентируйтесь на свойства.