DOM Attributes and Properties

HTML attributes are values written in markup, while DOM properties are JavaScript-accessible values on the element object. They are related, but a property can change without changing the corresponding attribute, and some properties reflect processed or current state.

An HTML attribute is declared in markup, such as `<input disabled value="Hello">`. Attributes are string-based markup data associated with an element. JavaScript can inspect them with methods such as `getAttribute()` and `hasAttribute()`.

A DOM property is a field exposed by the browser's element object, such as `input.disabled`, `input.value`, or `input.checked`. Properties can have types other than strings and can represent the element's current runtime state.

Some attributes and properties are connected through reflection. For example, setting `input.id = "email"` generally updates the corresponding `id` attribute, and changing the `id` attribute updates the `id` property. This synchronization is defined individually by the platform rather than being a universal rule.

A common distinction is an input's `value` attribute versus its `value` property. The attribute represents the markup/default value, while the property represents the element's current value. After the user edits the field, `input.value` can differ from `input.getAttribute("value")`.

Boolean attributes illustrate another important rule. An attribute such as `disabled` is considered present or absent; its textual value is not normally interpreted as a JavaScript boolean. The corresponding `element.disabled` property is a boolean, making it convenient for runtime checks and updates.

Key points

• Attributes come from HTML markup and are accessed as strings with APIs such as `getAttribute()`.
• Properties belong to the DOM object and may expose typed or computed runtime state.
• Some attributes reflect to properties, but reflection behavior differs by property.
• For form controls, a property can represent current state while an attribute represents initial/default markup state.
• Boolean attributes are controlled primarily by presence; their DOM properties expose boolean values.

Interview questions

What is the difference between an HTML attribute and a DOM property?

An attribute is part of the element's HTML markup, while a property is a value exposed on the DOM object. Attributes are commonly accessed with `getAttribute()` and are generally strings. Properties can have richer types and can represent live browser state. Some attributes and properties reflect each other, but that behavior is specific to the individual DOM feature.

Why can `input.value` differ from `input.getAttribute('value')`?

The `value` attribute describes the value supplied in the markup and commonly establishes the control's initial value. The `value` property represents the input's current value. If a user edits the field or JavaScript assigns a new value to the property, the current value can change without changing the attribute. Therefore, code that needs live form state normally reads the property.

What happens with `<button disabled="false">`?

The button is still disabled because `disabled` is a boolean HTML attribute. For boolean attributes, presence generally means true, regardless of the attribute's textual value. The DOM property `button.disabled` therefore evaluates to `true`. To enable the button, remove the attribute or set the property to `false`.

Does changing a DOM property always update the corresponding HTML attribute?

No. Some DOM properties reflect their corresponding content attributes, but reflection is defined separately for each feature. Other properties represent state or behavior that is not directly mirrored into markup. Form-control properties are a common source of differences between current state and serialized attributes. You should therefore use the API that matches whether you need markup/default information or live DOM state.

How would you decide whether to use `getAttribute()` or a DOM property?

Use `getAttribute()` when you specifically need the attribute value as represented in markup, including when the attribute may not have a corresponding useful property. Use a DOM property when you need the browser's typed or current representation of the element's state. For example, `input.value` is appropriate for current user-entered text, while `getAttribute('value')` can reveal the declared value attribute. The key is to distinguish serialized markup from live DOM state.