Properties and attributes of a DOM element seem same but there is a difference between these two terms. When writing HTML source code, attributes are defined in HTML elements. Browser parses HTML code and a corresponding DOM node is created. This DOM node is an object, and therefore it has properties.

For instance, the HTML element:

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

has 2 attributes.

When above HTML code is parsed by browser a corresponding HTMLInutElement object is created with different properties like accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children etc.

Properties are the properties of that object, and attributes are the elements of the attributes property of that object. When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it’s not a one-to-one relationship.

For instance, the HTML element:

<input id="elementId" type="text" value="name">

the corresponding DOM node will have id, value and type properties :

1) The id property is a reflected property for the id. Changes in the id property will get reflected to id attribute.

2) Value property doesn’t reflect the value instead, it’s the current value of the input. So if user types “Array151” in input box then value will return Array151 but the


will return the value attribute that is name.

3) The type property is a reflected property for the type. Changes in the type property will get reflected to type attribute, but type isn’t a pure reflected property as it is limited to valid types of an input that is some known values.

For instance. If we have an element with type “abc

<input type="abc">

then the


gives you “abc” 

but the


gives you “text“.

The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.

In nutshell, most of  properties are directly reflection of HTML attributes and some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. For more on this go through the spec