HTML is the standard language for creating documents that are intended to be displayed on web browsers. It is very usual to get confused with attributes and properties while performing DOM object manipulation in JavaScript. Before learning about the differences, let us first define the Document Object Model.
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.
In simpler terms, DOM is an API for the HTML, and we use languages like JavaScript or frameworks like React, Vue.js to access and manipulate the HTML using the corresponding DOM objects.
Notes:
- Some DOM properties don’t possess corresponding attributes.
- Some HTML attributes don’t possess corresponding properties.
- Some HTML attributes, like ‘class’, possess 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.
html
<!DOCTYPE html>
<html>
<body>
<input id="input" type="number"
value="Phone Number:">
<p id="display"></p>
<script>
var element = document.getElementById("input");
// Getting the property, returns "Phone Number:"
window.alert(element.getAttribute("value"));
element.value = 1234;
var x = element.value;
// Getting the attribute, returns "1234"
document.getElementById("display").innerHTML
= "Value Attribute: " + x;
</script>
</body>
</html>
|
Output:
In the webpage above, let us consider that the user inputs “1234” into the input field. Getting the value of the “value” attribute via element.getAttribute(“value”) would return “Phone Number:” because we have provided this as the initial value of this attribute in the source code. But getting the value of the “value” property via element.value will return “1234” because the “value” property gets updated with the new value, but not the “value” attribute.
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.
html
<!DOCTYPE html>
<html>
<body>
<p>
Click the button the display
the number of attributes
associated with it.
</p>
<button id="AttributeDemo"
onclick="myFunction()">
Try it
</button>
<p id="display"></p>
<script>
function myFunction() {
var Attrdemo = document.getElementById(
"AttributeDemo").attributes.length;
document.getElementById(
"display").innerHTML = Attrdemo;
}
</script>
</body>
</html>
|
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.
javascript
var Attrdemo = document.getElementById(
'AtrributeDemo').attributes[1].name;
|
Output:
onclick
The attributes have a data type of string. So no matter the value of the attribute, it will always return a string.
Example:
document.getElementById('AtrributeDemo').getAttribute('id')
Output:
AttributeDemo
Property: In contrast to the attributes, which are defined in HTML, properties belong to the DOM. Since DOM is an object in JavaScript, we can get and set properties.
javascript
<!DOCTYPE html>
<html>
<body>
<p>
Click the "display" button for
the number of attributes
associated with it.
</p>
<button id="AttributeDemo"
onclick="myFunction()">
Try it
</button>
<p id="display"></p>
<script>
function myFunction() {
document.getElementById('AttributeDemo')
.geeksforgeeks = 777;
var x = document.getElementById(
'AttributeDemo').geeksforgeeks;
document.getElementById(
"display").innerHTML = x;
}
</script>
</body>
</html>
|
Output:
Default attributes (non-user-defined) change when corresponding property changes and vice-versa.
html
<!DOCTYPE html>
<html>
<body>
<p>
Click the button the display the
current className & the edited
className
</p>
<button id="demo1" class="button"
onclick="Function1()">
Click Me
</button>
<p id="displayCurrent"></p>
<p id="diplayEdited"></p>
<script>
function Function1() {
var div = document.getElementById("demo1");
// Returns "button"
window.alert("Current Class : "
+ div.getAttribute("class"));
div.setAttribute("class", "GeeksForGeeks");
// Returns : "GeeksForGeeks"
window.alert("Edited Class : "
+ div.getAttribute("class"));
}
</script>
</body>
</html>
|
Output:
Note:
- Non-custom attributes (like id, class, etc.) have 1:1 mapping to the properties.
- We use ‘className’ to access (get or set) the ‘class’ property because ‘class’ is a reserved keyword in JavaScript.
- Attributes that have a defined default value remain constant when the corresponding property changes.
Difference between HTML attributes and DOM properties:
| Attribute |
Property |
| Attributes are defined by HTML. |
Properties are defined by the DOM. |
| The value of an attribute is constant. |
The value of a property is variable. |
These are used to initialize the DOM properties. After initialization, the job is finish.
|
No such job defined. |
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!