What is the difference between properties and attributes in HTML

Question

After the changes made in jQuery 1 6 1  I have been trying to define the difference between properties and attributes in HTML   Looking at the list on the jQuery 1 6 1 release notes  near the bottom   it seems one can classify HTML properties and attributes as follows    Properties  All which either has a boolean value or that is UA calculated such as selectedIndex   Attributes   Attributes  that can be added to a HTML element which is neither boolean nor containing a UA generated value    Thoughts

User · Answer

After reading Sime Vidas s answer  I searched more and found a very straight-forward and easy-to-understand explanation in the angular docs   HTML attribute vs  DOM property -------------------------------      Attributes are defined by HTML  Properties are defined by the DOM  Document Object Model    A few HTML attributes have 1 1 mapping to properties  id is one example   Some HTML attributes don t have corresponding properties  colspan is one example   Some DOM properties don t have corresponding attributes  textContent is one example   Many HTML attributes appear to map to properties     but not in the way you might think    That last category is confusing until you grasp this general rule  Attributes initialize DOM properties and then they are done  Property values can change  attribute values can t  For example  when the browser renders  lt input type  quot text quot  value  quot Bob quot  gt   it creates a corresponding DOM node with a value property initialized to  quot Bob quot   When the user enters  quot Sally quot  into the input box  the DOM element value property becomes  quot Sally quot   But the HTML value attribute remains unchanged as you discover if you ask the input element about that attribute  input getAttribute  value   returns  quot Bob quot   The HTML attribute value specifies the initial value  the DOM value property is the current value       The disabled attribute is another peculiar example  A button s disabled property is false by default so the button is enabled  When you add the disabled attribute  its presence alone initializes the button s disabled property to true so the button is disabled  Adding and removing the disabled attribute disables and enables the button  The value of the attribute is irrelevant  which is why you cannot enable a button by writing  lt button disabled  quot false quot  gt Still Disabled lt  button gt   Setting the button s disabled property disables or enables the button  The value of the property matters  The HTML attribute and the DOM property are not the same thing  even when they have the same name

User · Answer

When writing HTML source code  you can define attributes on your HTML elements  Then  once the browser parses your code  a corresponding DOM node will be created  This node is an object  and therefore it has properties   For instance  this HTML element    lt input type  text  value  Name   gt    has 2 attributes  type and value    Once the browser parses this code  a HTMLInputElement object will be created  and this object will contain dozens of properties like  accept  accessKey  align  alt  attributes  autofocus  baseURI  checked  childElementCount  childNodes  children  classList  className  clientHeight  etc   For a given DOM node object  properties are the properties of that object  and attributes are the elements of the attributes property of that object   When a DOM node is created for a given HTML element  many of its properties relate to attributes with the same or similar names  but it s not a one-to-one relationship  For instance  for this HTML element    lt input id  the-input  type  text  value  Name   gt    the corresponding DOM node will have id type  and value properties  among others     The id property is a reflected property for the id attribute  Getting the property reads the attribute value  and setting the property writes the attribute value  id is a pure reflected property  it doesn t modify or limit the value  The type property is a reflected property for the type attribute  Getting the property reads the attribute value  and setting the property writes the attribute value  type isn t a pure reflected property because it s limited to known values  e g   the valid types of an input   If you had  lt input type  foo  gt   then theInput getAttribute  type   gives you  foo  but theInput type gives you  text   In contrast  the value property doesn t reflect the value attribute  Instead  it s the current value of the input  When the user manually changes the value of the input box  the value property will reflect this change  So if the user inputs  John  into the input box  then   theInput value    returns  John    whereas   theInput getAttribute  value      returns  Name     The value property reflects the current text-content inside the input box  whereas the value attribute contains the initial text-content of the value attribute from the HTML source code   So if you want to know what s currently inside the text-box  read the property  If you  however  want to know what the initial value of the text-box was  read the attribute  Or you can use the defaultValue property  which is a pure reflection of the value attribute   theInput value                    returns  John  theInput getAttribute  value      returns  Name   theInput defaultValue             returns  Name      There are several properties that directly reflect their attribute  rel  id   some are direct reflections with slightly-different names  htmlFor reflects the for attribute  className reflects the class attribute   many that reflect their attribute but with restrictions modifications  src  href  disabled  multiple   and so on  The spec covers the various kinds of reflection

User · Answer

The answers already explain how attributes and properties are handled differently  but I really would like to point out how totally insane this is  Even if it is to some extent the spec   It is crazy  to have some of the attributes  e g  id  class  foo  bar  to retain only one kind of value in the DOM  while some attributes  e g  checked  selected  to retain two values  that is  the value  when it was loaded  and the value of the  dynamic state    Isn t the DOM supposed to be to represent the state of the document to its full extent    It is absolutely essential  that two input fields  e g  a text and a checkbox behave the very same way  If the text input field does not retain a separate  when it was loaded  value and the  current  dynamic  value  why does the checkbox  If the checkbox does have two values for the checked attribute  why does it not have two for its class and id attributes  If you expect to change the value of a text  input  field  and you expect the DOM  i e  the  serialized representation   to change  and reflect this change  why on earth would you not expect the same from an input field of type checkbox on the checked attribute   The differentiation  of  it is a boolean attribute  just does not make any sense to me  or is  at least not a sufficient reason for this

User · Answer

well these are specified by the w3c what is an attribute and what is a property http   www w3 org TR SVGTiny12 attributeTable html but currently attr and prop are not so different and there are almost the same but they prefer prop for some things  Summary of Preferred Usage The  prop   method should be used for boolean attributes properties and for properties which do not exist in html  such as window location   All other attributes  ones you can see in the html  can and should continue to be manipulated with the  attr   method   well actually you dont have to change something if you use attr or prop or both  both work but i saw in my own application that prop worked where atrr didnt so i took in my 1 6 app prop

User · Answer

Difference HTML properties and attributes   Let s first look at the definitions of these words before evaluating what the difference is in HTML   English definition    Attributes are referring to additional information of an object  Properties are describing the characteristics of an object    In HTML context   When the browser parses the HTML  it creates a tree data structure wich basically is an in memory representation of the HTML  It the tree data structure contains nodes which are HTML elements and text  Attributes and properties relate to this is the following manner    Attributes are additional information which we can put in the HTML to initialize certain DOM properties  Properties are formed when the browser parses the HTML and generates the DOM  Each of the elements in the DOM have their own set of properties which are all set by the browser  Some of these properties can have their initial value set by HTML attributes  Whenever a DOM property changes which has influence on the rendered page  the page will be immediately re rendered    It is also important to realize that the mapping of these properties is not 1 to 1  In other words  not every attribute which we give on an HTML element will have a similar named DOM property    Furthermore have different DOM elements different properties  For example  an  lt input gt  element has a value property which is not present on a  lt div gt  property   Example   Let s take the following HTML document     lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset  utf-8  gt    lt  -- charset is a attribute -- gt     lt meta name  viewport  content  width device-width  gt   lt  -- name and content are attributes -- gt     lt title gt JS Bin lt  title gt   lt  head gt   lt body gt   lt div id  foo  class  bar foobar  gt hi lt  div gt   lt  -- id and class are attributes -- gt   lt  body gt   lt  html gt    Then we inspect the  lt div gt   in the JS console    console dir document getElementById  foo       We see the following DOM properties  chrome devtools  not all properties shown       We can see that the attribute id in the HTML is now also a id property in the DOM  The id has been initialized by the HTML  although we could change it with javascript   We can see that the class attribute in the HTML has no corresponding class property  class is reserved keyword in JS   But actually 2 properties  classList and className

[javascript] What is the difference between properties and attributes in HTML?

HTML attribute vs. DOM property

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to properties