Back to: Angular Tutorials For Beginners and Professionals
HTML Attribute VS DOM Property with Example
In this article, I am going to discuss the HTML Attribute VS DOM Property with an example. Please read our previous article where we discussed Angular Property Binding in detail. At the end of this article, you will understand what exactly DOM is and the difference between HTML Attribute and DOM Property.
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, let say we have a page with the following HTML.
When the above HTML is loaded by the browser, then it creates the Document Object Model (DOM) as shown in the below image.
So in simple words, we can say that the DOM is an application programming interface (API) for the HTML, and we can use the programming languages like JavaScript or 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 Angular Interpolation and Angular Property Binding. And if you remember we disabled the button’s click event using the following code.
Interpolation example: <button disabled='{{IsDisabled}}’>Click Me</button>
Property binding example: <button [disabled]=’IsDisabled’>Click Me</button>
If you look at the above two 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. So, the Angular data-binding is all about binding to the DOM object properties and not the HTML element attributes.
What is the difference between the HTML element attribute and DOM property?
- The Attributes are defined by HTML whereas the properties are defined by the DOM.
- The attribute’s main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.
- 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 Anurag.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<div> <input id='inputId' type='text' value='Anurag'> </div>` }) export class AppComponent { }
At this point, run the application and you will see the value Anurag in the textbox as expected as shown in the below image.
Getting the Attribute and Property Value
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 the value property of the input element to get the attribute and property values. Notice at the moment both have the value Anurag. The GetAttribute() Method provides you with the attribute value of the HTML Element.
The Value Property of the DOM object provides you the property value as shown in the below image.
Now, change the value in the textbox to Mohanty on the webpage. And do the same thing once more as shown below.
Now, when we query for the attribute and property values, the attribute value is still Anurag but the property value is changed to Mohanty. So this proves that the Property values changes whereas the attribute values never changed.
So, the points to remember is that,
- The HTML attributes and DOM properties are two different things.
- Angular binding works with the properties and events, and not with the attributes.
- The job of attributes is to initialize the DOM object properties.
In the next article, I am going to discuss Attribute Binding in Angular Application. Here, in this article, I try to explain HTML Attribute VS DOM Property with some examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Great Work!🤩
I have been working with html for quite a while (it’s not my ‘core-business’, I am back-end developer), but I never knew this.
Very clear explanation! Well done!
Very good article.
very nice…
This in not true. If you change a property from DOM Object (like adding a class to “classList” attribute), you can see from the console that also the HTML “class” property is changed.
wheter you execute “.getAttribute(‘class’)” and “.classList.value” you’ll see the same.
No, it is true I followed codes of yourComment it gives me the changed value , maybe be you access your code before setting the code.
Great Work!🤩
This is just the kind of thing which makes you a pro
Thank you so much
very Nicely explained
Very Nice and well explained article.
Please integrate UPI payment gateway with you website. It’s easy for Indian to buy coffee for you