DOM: It is the acronym for the Document Object Model. When the browser parses your HTML code, it creates a corresponding DOM node. The HTML properties are accessed from this node object.
- Some DOM properties don’t have corresponding attributes.
- Some HTML properties don’t have corresponding properties.
- Some HTML attributes, like ‘id’, have 1:1 mapping to properties.
Let us take a look at some quick examples to demonstrate the differences between attributes and properties.
Example: Consider the following HTML code snippet.
Now, let us consider that the user inputs “1234”, then the element.getAttribute(“value”) will return “Phone Number:” because we have provided this as the initial value of this attribute. But element.value will return “1234”.
Thus, the value attribute has the initial text-content that was provided by the developer in the HTML source code because the value property reflects the current text-content inside the input box (provided by the user in this case).
Now we have a basic idea about the difference, let us dive deep and learn about more differences.
Attribute: Attributes are defined by HTML and are used to customize a tag.
The output is 2 because the two attributes are: id=”AttributeDemo” and onclick=”myFunction()”.
Note: The document.getElementsById(‘AttributeDemo’).attributes code snippet returns a collection of the specified node’s attributes, as a NamedNodeMap object. To access the nodes, we can use the generic indexing method. Replace the following line in the above code snippet.
The attributes have a data type of string. So no matter the value of the attribute, it will always return a string.
Default attributes (non-user-defined) changes when corresponding property changes and vice-versa.
- Non-custom attributes (like id, class, etc.) have 1:1 mapping to the properties.
- Attributes which have a defined default value remain constant when the corresponding property changes.
Difference between HTML attributes and DOM properties:
|Attributes are defined by HTML.||Properties are defined by the DOM.|
|Value of an attribute is constant.||Value of a property is variable.|
|These are used to initialize the DOM properties. After initialization, the job is finish.||No such job defined.|
- Why Transition properties does not work with display properties ?
- Difference between 'hidden' and 'aria-hidden' attributes in HTML
- Difference between YAML(.yml) and .properties file in Java SpringBoot
- Difference Between Properties and Indexers in C#
- HTML | Attributes
- HTML | Id Attributes
- HTML | data-* Attributes
- HTML | DOM attributes Property
- HTML | Attributes Complete Reference
- Tags vs Elements vs Attributes in HTML
- Why are dashes preferred for CSS selectors / HTML attributes ?
- jQuery | Set Content and Attributes
- jQuery | Get Content and Attributes
- What are these attributes `aria-labelledby` and `aria-hidden` ?
- HTML | DOM Window opener Properties
- HTML | DOM Window frames Properties
- HTML | DOM Window frameElement Properties
- HTML | DOM Window localStorage Properties
- HTML | DOM Window defaultStatus Properties
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.