HTML Attribute Vs DOM Property - Part11
To learn Angular2 from scratch and most useful for beginners Please see the link below:
• What is AngularJS and What is Angular...
This video is about HTML Attribute Vs DOM Property.
What is DOM and also the difference between DOM and HTML?
DOM stands for Document Object Model.DOM is the tree model to represent HTML. When a web page is loaded, the browser creates a Document Object Model of the page, which is an object-oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages.
What is the DOM tree?
The backbone of the HTML document are the tags.
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called “children” of the enclosing one.
The text inside a tag is an object as well.
All these objects are accessible using JavaScript.
An example of the DOM tree we discussed in our video.
see the HTML structure and DOM tree.
What is a DOM property?
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.
What are HTML Attributes and DOM Properties?
HTML attributes. In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes standard attributes and creates DOM properties from them. So when an element has an id or another standard attribute, the corresponding property gets created.
In our last two articles, we discussed the interpolation and property binding in Angular.
Interpolation example: [button disabled='{{IsDisabled}}’]Submit[/button]
Property binding example: [button [disabled]=’IsDisabled’]Submit[/button]
If you look at the above 2 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. The Angular data-binding is all about binding to the DOM object properties and not the HTML element attributes.
What is the difference between HTML element attribute and DOM property?
1. The Attributes are defined by HTML whereas the properties are defined by the DOM.
2. Attributes 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.
There are some HTML attributes that have corresponding DOM property and those DOM properties have corresponding HTML attributes such as id.
4. There are also some HTML attributes that do not have corresponding DOM property such as colspan.
5. There are also some DOM properties that do not have corresponding HTML attributes such as textContent.
6. The HTML attribute value contains initial value whereas DOM property value contains a current value.
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 Sumit.
[input id="inputId" type="text" value="Sumit"/]
Then run the application and you will see the value Sumit in the textbox as expected.
Now, launch the browser developer tools as we showed 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 Sumit.
The Getattribute() Method provides you with the attribute value of the HTML Element.
inputId.getAttribute('value')
"Sumit"
The Value Property of the DOM object provides you the property value
inputId.'value
"Sumit"
Now, Change the value in the textbox to Mary on the webpage. And do the same thing once more as shown in the video.
-inputId.getAttribute('value')
"Sumit"
-inputId.'value
"Mary"
Now, when we query for the attribute and property values, the attribute value is still Sumit but the property value is changed to Mary. So this proves that – the Property values change 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.
Thanks For Watching!
Please, Like and Subscribe.
Смотрите видео HTML Attribute Vs DOM Property - Part11 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code With Rohini 31 Май 2019, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 767 раз и оно понравилось 11 людям.