-> 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
valueproperty 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.