HTML Attribute VS DOM Property

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.

Understanding HTML Attribute and DOM Property in Angular Application

When the above HTML is loaded by the browser, then it creates the Document Object Model (DOM) as shown in the below image. 

HTML Attribute VS DOM Property

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?
  1. The Attributes are defined by HTML whereas the properties are defined by the DOM.
  2. The attribute’s 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 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.

HTML Attribute VS DOM Property

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.

Displaying Attribute Value of DOM Element

The Value Property of the DOM object provides you the property value as shown in the below image.

Displaying Property Value of DOM Element

Now, change the value in the textbox to Mohanty on the webpage. And do the same thing once more as shown below.

HTML Attribute VS DOM Property

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, 
  1. The HTML attributes and 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, 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.

Leave a Reply

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