Dom attribute vs propert

Javascript object is a collection of key and value pair. key is always a string and value can be anything.

When a webpage is rendered, dom object is created, which is a javascript object. Dom contains all the element on the page to create a structure of the page.Attributes are defined by html itself.

<input type=’text’ value=’John’/>

In the above example , HTML defines two attribute for input element type and value .

When dom is created , it will have input element as one of it’s property. When input element is created in the dom, its attribute values are copied into the corresponding properties on the dom. once the attributes are copied to properties, they are done. we don’t need them anymore. Attributes do not change after the initialization.

For example , In the above example text box if we type something into the textbox, value attribute for input element will be John irrespective of what we type. But the value property on input element will change to the text we type into the input text box.