Attribute vs property in the DOM

An attribute is what you wrote in the HTML; a property is a field on the DOM object the browser built from it. Attributes are always strings. Properties can be any type, and they hold the live state.

<input id="name" value="Mai" />

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

el.getAttribute('value');  // 'Mai'  — still the markup
el.value;                  // 'Mai'  — for now
// user types "Linh"
el.getAttribute('value');  // 'Mai'  — unchanged
el.value;                  // 'Linh' — current state

The attribute is the initial value; the property is the current one. This is exactly why a React value prop renders to the value attribute but the input's own value property is what you read back.

They do not always line up

• Names can differ: class maps to el.className, for maps to el.htmlFor.
• Types can differ: el.getAttribute('disabled') is '' while el.disabled is true; href as an attribute may be /about but the property is the resolved absolute URL.
• Some properties have no attribute at all — el.offsetWidth, el.children.
• An unknown attribute gets no property. data-user-id is reachable through el.dataset.userId, not el.userId.

Which to use

Read and write properties for anything to do with current state: el.value, el.checked, el.disabled. Use attributes when you need what the markup says, when working with data-*, ARIA, or SVG, or when the thing has no property equivalent.

Setting el.checked = false on a checkbox works; removeAttribute('checked') after the user has clicked it does nothing visible.