html attribute vs dom property

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss the difference between HTML attribute and DOM property.

What is DOM
DOM stands for Document Object Model. When a browser loads a web page, the browser creates a Document Object Model of that page.

In simple terms you can think of the DOM as an application programming interface (API) for HTML, and we can use programming languages like JavaScript, or JavaScript frameworks like Angular to access and manipulate the HTML using their corresponding DOM objects.

In other words 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 the previous 2 videos we discussed 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 notice the above 2 examples, it looks like we are binding to the Button's disabled attribute. This is not true. We are actually binding to the disabled property of the button object. Angular data-binding is all about binding to DOM object properties and not HTML element attributes.

What is the difference between HTML element attribute and DOM property
Attributes are defined by HTML, where as properties are defined by the DOM.
Attributes initialize DOM properties. Once the initialization complete, the attributes job is done.
Property values can change, where as attribute values can't.

Let's prove this point - Property values change, but the attribute values don't with an example.

In the example below, we have set the value attribute of the input element to Tom.
[input id='inputId' type='text' value='Tom']

At this point, run the web page and in the textbox you will see 'Tom' as the value.

Launch the browser developer tools.

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 'Tom'

Change the value in the textbox to Mary.

Notice now, when we query for the attribute and property values, the attribute value is still Tom but the property value is Mary. So this proves the point - Property values change, where as attribute values don't.

So it is important to keep in mind that,
HTML attributes and the DOM properties are different things.
Angular binding works with properties and events, and not attributes.
The role of attributes is to initialize element properties and their job is done.

[Algebrodadio]

Venkat - I really appreciate that you have such a deep understanding about the way all of this stuff works. Thank you for these vids.

[palanisamyrengasamy]

Hi KudVenkat, thank you for making Angular 2 video series. I appreciate your hard work and valuable time. Your tutorials are easy to follow and understand. The way you teach is entirely different from others. Thank you very much.

[JoshPeterson]

Thank you. That was the clearest explanation of the DOM I've heard yet and it was so helpful.

[kimicheng]

Your explanation is always understandable, on point and clear. After you said that attribute can initialize the property, I immediately understand the relationship between them.

[ThumbIKR]

Sir, your way of describing any topic is just awesome, very clean and very effective. thanks :)

[krishnakishore]

Watched this Video couple of times, Now I Understood what is DOM and how different technologies like angular, jquery, etc are using the dom
Thank you so much, sir, for this explanation.

[ruthyayele]

Thanks a lot Sir! your video is helpful as usual. May the almighty God bless you more.

[drakshayanibakka]

Now I have understood about DOM clearly and thanks for this video sir. Your explanation is awesome

[JSicking]

I've been looking for this explanation for so long now, this was extremely helpful. Thank you so much.

[shrikantpapanwar]

Very important concept sir...!
Thank you...!

[urdustoriespoetrycollectio]

Love your tutorial's.👌👌 helpful 👍👍
have a good day too 😍

[Coyotl]

That was very well explained. Thank you!!

[SalmanAnsari-smzn]

Whenever a notification appeared on my laptop from kudvenkat, it makes me so excited that I cannot stop myself even for a single moment to learn something amazing and new to start developing our own stuff.
One more thing if you could speed up in uploading angular 2 videos, I'll highly appreciate it....

[maravarmanmanoharan]

very good explanation about changeable DOM property Values against unchangeable HTML attributes

[amitjaiswal]

Just amazing stuff by venkat....waiting for upcoming videos on Angular2....can't wait sir...please upload soon

[princejune]

Amazing you cleared that up really well thank

[hamzehhanandeh]

This video is helpful, amazing and beautiful, thank you

[amanagarwal]

Sir, Please make a series on Python tutorial. It help us so much. Thanks for your videos which always help us to understand web programming.

[dilipsolanki]

Hello Mr. Venkat,

Thanks for this video. I am little confused here, as you have shown that value is an attribute of button tag. So same disabled should have been also an attribute of button tag. But in last you said 'disabled' is a DOM property not an attribute. If the 'value' is an attribute then disabled should also be an attribute. Please correct me if I am wrong.

[sanjibanichoudhury]

if the html attribute value doesn't change after the property change, how does the view(template) change on the screen. Ultimaltely on screen html shows right? What am i missing, plz help?