Attribute vs Property in HTML

The terms attribute and property can be confusing in HTML.

For example the javascript framework Angular has the concepts Property Binding and Attribute Binding . Without knowing the difference between the two it is difficult to grasp the difference between those concepts.

The major difference between the two is this:

Attribute is related to HTML

Property is related to DOM

There is no “HTML property” only “HTML Attribute”

Similarly there is no “DOM Attribute” only “DOM Property”

When the browser reads your HTML , it converts the HTML attributes to DOM properties.

Often the html attributes and DOM properties have the same names.

For exampe in the below HTML:

<input id="message"/>

“id” is a html attribute

When the browser parses the above HTML element , it creates a DOM object like this:

input.id = "message"

Here “id” is the property of the DOM object “input”

In the above case the name “id” is the same for both HTML attribute and DOM property.

But it is not always one to one.

Different Attribute to Property mapping

For example , consider the below html element:

<td colspan="2"></td>

The html element <td> has the attribute “colspan”

But when the browser parses the above html element and creates the corresponding DOM object the property names changes from “colspan” to “colSpan” (camelcase):

td.colSpan = "2"

Attribute and property names are different !

So when Angular refers to Property Binding it refers to changing the DOM property values and not the attribute values.

Attribute changes reflected in DOM Property:

Also when you change the value of a HTML attribute , will the corresponding DOM property also gets changed and vice versa?

Not always!

For example in the below example:

<input id="message"/>

<script>
      var input = document.getElementById("message");
     input.setAttribute("id","updatedmessage");

    alert(input.getAttribute("id");  //accessing html attribute
    alert(input.id); //accessing dom property
</script>

input.getAttribute(“id”) is used to access the html attribute of the input element.

input.id is used to access the DOM property of the input element.

On changing the attribute using the method setAttribute() , the value gets reflected in the DOM property as well.

And if you change the id DOM property first and get the value of the attribute it gets changed as well:

<script>
//continued...

input.id ="dommessage";

alert(input.getAttribute("id")); 

</script>

The above code alerts the attribute id value as “dommessage” which is updated by changing the dom property id.

DOM property changes not getting reflected in HTML Attribute:

Now consider another scenario , if you change the attribute “value” of an input element does the DOM property “value” also gets changed?

Yes

But if you change the DOM property “value” does it get reflected in the attribute “value”?

No !

It works only one way for the attribute “value”:

Attribute -> Property works

Property->Attribute doesn’t work!

Let’s see it through an example:

<input id="message" value="Hello World"/>

<script>
      var input = document.getElementById("message");
     input.setAttribute("value","Hello this is changed through attribute!");

    alert(input.getAttribute("value");  //accessing html attribute
    alert(input.value); //accessing dom property
</script>

In the above example both alert statements alert the value “Hello this is changed through attribute”

This is because if you change the attribute value it gets reflected in the DOM property value.

But the reverse doesn’t work:

<script>
//continued...

input.value="Hello this is changed through DOM property";

alert(input.getAttribute("value")); 

</script>

Though the value property is changed , the alert still alerts the value “Hello this is changed through attribute!” as the change doesn’t get propagated from DOM property to HTML attribute.

Other Differences

• HTML attributes are not case sensitive , the attribute “value” is the same as “Value” whereas DOM properties are case sensitive , the property “value” is different from “Value”
• HTML attributes are always strings , DOM properties can have different data types . For example the property input.style is an object whereas the attribute input.getAttribute(“style”) is a string.
• All attributes starting with “data-” ( non standard attributes – created by user) are mapped to the DOM property “dataset”. These attributes are reserved for programmer’s use.(To prevent user defined html attributes from colliding with standard html attributes)

For example the below attribute:

<input  id="message" data-myvalue="My custom attribute">

can be accessed using the below DOM property:

var input = document.getElementById("message");

alert(input.dataset.myvalue); //alerts "My custom attribute"

The attribute “data-value” is converted to a DOM property by prefixing the keyword “dataset” and removing the word “data” from the attribute

That’s it!

References:

https://javascript.info/dom-attributes-and-properties

https://angular.io/guide/property-binding