HTML Attribute VS DOM Property

HTML Attribute VS DOM Property

In this article, I will discuss the HTML Attribute VS DOM Property with an example.

What is DOM?

The DOM stands for Document Object Model. When a browser loads a web page, then the browser creates the Document Object Model (DOM) for that page. For example, for the below HTML, 

HTML Attribute VS DOM Property

When the above HTML is load, the browser creates a Document Object Model as shown below 

HTML Attribute VS DOM Property So in the simple word, we can say that the DOM is an application programming interface (API) for the HTML, and we can then use the programming languages like JavaScript or the JavaScript frameworks like Angular to access and manipulate the HTML using their corresponding DOM objects. 

In other words, we can say that the DOM contains the HTML elements as objects, their properties, methods, and events and it is a standard for accessing, modifying, adding or deleting HTML elements.

In our last two articles, we discussed the interpolation and property binding in Angular.

Interpolation example: <button disabled='{{IsDisabled}}’>Click Me</button>

Property binding example: <button [disabled]=’IsDisabled’>Click Me</button>

If you look at the above 2 examples, you may feel that you are binding to the Button’s disabled attribute, but that is not true. You are actually binding to the disabled property of the button object. The Angular data-binding is all about binding to the DOM object properties and not the HTML element attributes.

What is the difference between HTML element attribute and DOM property?
  1. The Attributes are defined by HTML whereas the properties are defined by the DOM.
  2. Attributes main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.
  3. Property values can change, whereas the attribute values can never be changed.

Let’s prove this – The Property values can change, whereas the attribute values can neven be changed with an example.

In the below example, we have set the value attribute of the input HTML element to Pranaya.

HTML Attribute VS DOM Property At this point, run the application and you will see the value Pranaya in the textbox as expected as shown in the below image.

HTML Attribute VS DOM Property

Now, launch the browser developer tools by pressing the F12 key and then click on the Console Tab.

On the ‘Console‘ tab, use the getattribute() method and value property of the input element to get the attribute and property values. Notice at the moment both have the value Pranaya 

The Getattribute() Method provides you with the attribute value of the HTML Element

HTML Attribute VS DOM Property

The Value Property of the DOM object provides you the property value

HTML Attribute VS DOM Property

Change the value in the textbox to Kumar in the webpage. And do the same thing once more as shown below.

HTML Attribute VS DOM PropertyNow, when we query for the attribute and property values, the attribute value is still Pranaya but the property value is changed to Kumar. So this proves that – the Property values change whereas the attribute values never changed. 

So, the points to remember is that, 
  1. The HTML attributes and the DOM properties are two different things.
  2. Angular binding works with the properties and events, and not with the attributes.
  3. The job of attributes is to initialize the DOM object properties.

In the next article, we are going to discuss Attribute Binding in Angular.

SUMMARY:

In this article, I try to explain HTML Attribute VS DOM Property with some examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

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