Attribute vs property in the DOM
JavaScriptThe short answer
Attributes are defined in HTML and are used to set the initial state of an element. Properties are on the DOM object that JavaScript interacts with. When the browser parses HTML, it creates DOM objects and sets their properties from the attributes. After that, attributes and properties can be different — the attribute stays as the initial value, while the property reflects the current state.
Attributes
Attributes are what you write in HTML:
<input type="text" value="Hello" id="name-input" />This element has three attributes: type, value, and id. You can access them in JavaScript using getAttribute:
const input = document.querySelector('#name-input');input.getAttribute('value'); // "Hello"input.getAttribute('type'); // "text"Properties
Properties are on the JavaScript DOM object:
const input = document.querySelector('#name-input');input.value; // "Hello"input.type; // "text"input.id; // "name-input"This looks the same so far. But here is where it gets different.
When they diverge
If the user types "World" into the input field:
input.getAttribute('value'); // "Hello" — still the initial value!input.value; // "World" — the current valueThe attribute value reflects what was in the HTML originally. The property value reflects what is in the input right now. They are no longer the same.
Another example with checkboxes:
<input type="checkbox" checked />const checkbox = document.querySelector( 'input[type="checkbox"]');// Initially both are truecheckbox.getAttribute('checked'); // "" (attribute exists)checkbox.checked; // true (property)// User unchecks the checkboxcheckbox.getAttribute('checked'); // "" (still there!)checkbox.checked; // false (current state)The checked attribute does not change. The checked property does.
The general rule
- Attributes = initial values from HTML, accessed with
getAttribute/setAttribute - Properties = current values on the DOM object, accessed with dot notation
Most of the time, you want properties because they give you the current state. Use attributes when you specifically need the original HTML value.
Common attribute-property pairs
| HTML Attribute | DOM Property | Notes |
|---|---|---|
class | className | Different name |
for | htmlFor | Different name |
value | value | Property is current, attribute is initial |
checked | checked | Property is current, attribute is initial |
href | href | Property gives full URL, attribute gives what was written |
Interview Tip
The clearest way to explain this is with the input value example. Show that the attribute stays as the initial value while the property updates with user input. This makes the distinction concrete and easy to understand.
Why interviewers ask this
This tests deep DOM knowledge. Most developers use properties without realizing there is a difference from attributes. Interviewers ask this to see if you understand how the browser maps HTML to JavaScript objects and if you know when to use getAttribute vs dot notation.