-> Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).
-> The HTML attribute and the DOM property are not the same thing, even when they have the same name.
A few HTML attributes have 1:1 mapping to properties. id
is one example.
Some HTML attributes don’t have corresponding properties. colspan
is one example.
Some DOM properties don’t have corresponding attributes. textContent
is one example.
Many HTML attributes appear to map to properties … but not in the way you might think!
-> When the browser renders <input type="text" value="Bob">
, it creates a corresponding DOM node with value
property initialized to “Bob”. When the user enters “Sally” into the input box, the DOM element value
property becomes “Sally”. But the HTML ‘value’ attribute remains unchanged as you discover if you ask the input element about that attribute: input.getAttribute('value')
returns “Bob”.
-> The HTML attribute value
specifies the initial value; the DOM value
property is the current value.