In this article we will discuss difference between HTML Attribute VS DOM Property. Before starting this article we recommend please go through our previous article Angular Property Binding. In this article we will cover below points.
- What is DOM ?
- Difference between the HTML attribute and DOM property with 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, let say we have a page with the following HTML.
The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.
When the above HTML is loaded by the browser, then it creates the Document Object Model (DOM) as shown in the below image.
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>
In the two examples we 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.
The Property values can change, whereas the attribute values can never be changed with an example. Here we have set the value attribute of the input HTML element to "CoreProgramm". When you run the application you can see the output printed like below;
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 is "CoreProgramm". The GetAttribute() Method provides you with the attribute value of the HTML Element like below;
 |
| In console tab when you write myinput(is the HTML element we use) with getAttribute() like above and press enter. It display the attribute value. |
- The Value Property of the DOM object provides you the property value as shown in the below image. Here myinput is html element.
Now, change the value in the textbox to "Follow us in Youtube/CoreProgramm"on the webpage. And do like in below image suggest.
➤ Final Conclusion
- The Property values can be changes whereas the attribute values never changed.
- 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.
Summary
In this tutorial we discussed HTML Attribute VS DOM Property. If have any question related to this topic then give your feedback.
You May Also Like...
- Angular Property Binding
- Angular Data Binding
- Angular Interpolation
- Angular Template VS Templateurl
- Getting Started with Angular 8 using TypeScript
- ngx-toastr in angular 8 | Part-2
- ngx-toastr in angular 8
- How to create Angular 8 Project using Angular CLI
- Angular 8 Project Structure
- Angular 8 Architecture
Post a Comment