HTML attribute vs dom property Video Lecture - Angular 2 tutorial - Front-End

this is part 10 of Anglet 2 tutorial in
this video we'll discuss the difference
between HTML attribute and Dom property
first let's understand what is Dom when
a web browser loads this HTML it creates
a Dom that looks like this Dom stands
for document object model notice at the
top of the Dom tree we have the window
object underneath that we have the
document object and underneath that we
have the HTML object this HTML object
represents this HTML element right here
and underneath the HTML object we have
had in body objects just like how we
have hidden body elements under the HTML
element and then underneath a head we
have title similarly underneath body we
have script and div and under there we
have h1 object so basically you can
think of this Dom as an API that is
application programming interface for
this HTML so we can use programming
languages like JavaScript or JavaScript
frameworks like angular to access and
modify these HTML elements using their
corresponding Dom objects so 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 our previous two videos
we discussed interpolation and property
binding here is an example for property
binding and this is an example for
interpolation if you notice both these
examples it looks like we are binding
two disabled attribute of the button
element but that's not true they're
actually binding to disable the property
of the button object in the Dom keep in
mind
angular data binding is all about
binding to Dom object properties and not
HTML element attributes so the obvious
question that comes to our mind at this
point is what's the difference between
an HTML attribute and a Dom
property attributes are defined by the
HTML whereas properties are defined by
the dorm
attributes initialized on properties
once the initialization is complete the
attributes job is done and they
effectively disappear after that
property values can change whereas
attribute value card let's actually
prove this last point with an example
within the butane plate of our AB
component let's include an input element
notice I have set the ID to input ID
type this text and look at the value
attribute here I have set it to comm so
the job of this value attribute of this
input element is to initialize value
property of the input object in the Dom
so at this point let's run our
application by pressing ctrl f5 so
notice within the textbox we see the
value Tom at this point let's launch
browser developer tools by pressing f12
and let's click on the console tab now
what we want to do is retrieve the value
of this input element value attribute to
do that we are going to make use of this
ID of the input element which is input
ID so within the console we are going to
use the get attribute method to get the
value of the attribute value you
remember we have initialized the value
attribute to Tom and that's what we see
right here so this is the value of the
attribute value now we know there will
be a corresponding value property for
the input object in the Dom now let's
try to get the value we have in that
value property now to do that again we
are going to use the ID of the input
element and this time we are going to
use the value property of the input
object in the Dom and again even in that
value property we have a value of Tom
now let's change the value that we have
in the textbox to Mary now let's try to
retreat the attribute value using get
attribute method notice the value
attribute still has Tom and let's see
what we have in the value property
of the input object in the Dom notice
the value property in the Dom has got
the updated value so keep in mind
property values can change whereas
attribute value can't so here we've got
two important points to keep in mind
HTML attributes and the Dom properties
are different things angler binding
works with properties and events and not
add views in both these examples
disabled is storm property and not at
Butte
thank you for listening and have a great
day