Difference between HTML Attribute and DOM Property

Difference between HTML Attribute and DOM Property

  • The difference between HTML attribute and DOM property is a important in understanding binding in Angular.
  • HTML is a set of written instruction for how to display a web page.
  • The browser reads the HTML and creates a DOM(Document Object Model). DOM is the manifestation of those HTML instructions in memory.
  • Changing the HTML does not automatically update the webpage unless the refreshes the browser, changing the DOM however instantly updates the webpage.
  • There is mostly a 1-to-1 mapping between the names and values of HTML attributes and their equivalent DOM properties, but not always.
  • hidden="true" hides the element but confusingly so does hidden="false" in HTML we just need to add hidden to hide the element.
  • The DOM representation of the hidden attribute is a property also called hidden, which if set to true hides the element and false shows the element.
  • Angular does not manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.
  • So when we write [hidden] we are manipulating the DOM property and not the HTML attribute.
  • This is why the above is called Input Property Binding and not Input Attribute Binding.

Example : 

<p [hidden]='true'>Exmaple input</p>

The target inside [] is the name of the property. In the example above the target is the hidden DOM property.
The text to the right of = is javascript code that gets executed and the resulting value is assigned to the target. true is still javascript code which if executed returns true.
 we are binding to the DOM property hidden and setting it to true so the element is hidden.


Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed