For a better experience please change your browser to CHROME, FIREFOX, OPERA or Internet Explorer.
html attribute vs dom property

html attribute vs dom property

Textual content model of the video


Angular 2 Tutorial playlist

Angular 2 Textual content articles and slides

All Dot Web and SQL Server Tutorials in English

All Dot Web and SQL Server Tutorials in Arabic

On this video we’ll focus on the distinction between HTML attribute and DOM property.

What’s DOM
DOM stands for Doc Object Mannequin. When a browser hundreds an online web page, the browser creates a Doc Object Mannequin of that web page.

In easy phrases you’ll be able to consider the DOM as an utility programming interface (API) for HTML, and we will use programming languages like JavaScript, or JavaScript frameworks like Angular to entry and manipulate the HTML utilizing their corresponding DOM objects.

In different phrases DOM accommodates the HTML parts as objects, their properties, strategies and occasions and it’s a commonplace for accessing, modifying, including or deleting HTML parts.

Within the earlier 2 movies we mentioned interpolation and property binding in Angular.

Interpolation instance
[button disabled='{{isDisabled}}’]Click on Me[/button]

Property binding instance
[button [disabled]=’isDisabled’]Click on Me[/button]

In case you discover the above 2 examples, it appears to be like like we’re binding to the Button’s disabled attribute. This isn’t true. We are literally binding to the disabled property of the button object. Angular data-binding is all about binding to DOM object properties and never HTML component attributes.

What’s the distinction between HTML component attribute and DOM property
Attributes are outlined by HTML, the place as properties are outlined by the DOM.
Attributes initialize DOM properties. As soon as the initialization full, the attributes job is finished.
Property values can change, the place as attribute values cannot.

Let’s show this level – Property values change, however the attribute values do not with an instance.

Within the instance beneath, we now have set the worth attribute of the enter component to Tom.
[input id=’inputId’ type=’text’ value=’Tom’]

At this level, run the net web page and within the textbox you will note ‘Tom’ as the worth.

Launch the browser developer instruments.

On the ‘Console’ tab, use the getattribute() technique and worth property of the enter component to get the attribute and property values. Discover in the mean time each have the worth ‘Tom’

Change the worth within the textbox to Mary.

Discover now, once we question for the attribute and property values, the attribute worth remains to be Tom however the property worth is Mary. So this proves the purpose – Property values change, the place as attribute values do not.

So you will need to remember that,
HTML attributes and the DOM properties are various things.
Angular binding works with properties and occasions, and never attributes.
The function of attributes is to initialize component properties and their job is finished.


leave your comment

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