HTML attribute vs. DOM property

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

Leave a Reply

Your email address will not be published. Required fields are marked *