HTML Attributes vs Properties

attributes

1. Part of html source
2. The tag below has two attributes type and value
   

   
   <input type="text" value="Name">
   

properties

1. Part of the DOM node object
2. The attributes can be found in the node’s attributes property
3. Properties and attributes are closely related but not one-one

4. 
   <input id="id" type="text" value="Name">
   

   
   In this example, the DOM Object will have id, type, and value properties among others.

more info

In the input example above, id and type are reflected properties in the DOM object. Reflected properties are those that set and read the underlying attribute. On the other hand, value is not a reflected property. The value attribute represents the initial value which in this case ‘Name.’ The value property on the other hand, is whatever is currently set on the DOM object. It is worth noting that the value attribute has a reflective property called defaultValue.