While using HTML, you may come across the words “properties” and “attributes”. In the DOM (Document Object Model), they have different roles even though they seem similar. In this blog, we will discuss their difference, behaviour, and working with JavaScript with examples for a better understanding.
Table of Contents:
What are Attributes?
It is the value you set for the HTML element in your code. You can use this to specify the starting state of an element, and you can also directly write the value in your HTML file.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Input Example</title>
</head>
<body>
<h2>Disabled Input Field Example</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" value="Intellipaat.aa" disabled>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Explanation: In this code, the type, id, value, and disabled are all attributes of the <input> element. These attributes will determine how the element behaves and looks when the page first loads.
What are Properties?
Properties are part of the DOM, which represents elements in your code. They’re like features of a JavaScript object tied to an element. You can change these properties with JavaScript without changing the actual HTML behind the scenes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Value Example</title>
</head>
<body>
<h2>Get and Set Input Value Example</h2>
<label for="username">Username:</label>
<input type="text" id="username" value="Intellipaat.aa" disabled>
<br><br>
<button onclick="updateInput()">Enable & Change Value</button>
<script>
function updateInput() {
let inputElement = document.getElementById("username");
console.log(inputElement.value);
inputElement.disabled = false;
inputElement.value = "XYZ";
console.log(inputElement.value);
}
</script>
</body>
</html>
Output:
Explanation: The value is a property of the <input> element in the DOM. It shows the current content of the input field, and you can change it dynamically with JavaScript.
Differences Between Attributes and Properties
|
Feature |
Attributes |
Properties |
| Definition | It is defined in the HTML markup. | It is defined in the DOM representation. |
| Access method | getAttribute() and setAttribute() | You can access it directly as properties of the DOM object. |
| Example | setAttribute(“value”, “Intellipaat”) | Element.value = “Intellipaat” |
Key Differences in Behaviour
Attributes Define the Initial State, While Properties Reflect the Current State:
You can use the attributes to set the values of the elements when the page first loads, where the properties are used to show the current value of the element when it changes.
console.log(inputElement.getAttribute("value"));
console.log(inputElement.value);
When you change inputElement.value, it doesn’t update inputElement.getAttribute(“value”). Attributes stay fixed as they were initially set in the HTML, even if properties change dynamically.
Boolean Attributes vs Boolean properties:
Attributes like checked, disabled, and read-only are called boolean attributes in HTML. When you work with them as properties in JavaScript, they behave differently compared 4to how they work in HTML.
<input type="checkbox" id="agree" checked>
let checkbox = document.getElementById("agree");
console.log(checkbox.getAttribute("checked"));
console.log(checkbox.checked);
checkbox.checked = false;
console.log(checkbox.getAttribute("checked"));
console.log(checkbox.checked);
If you use getAttribute(“checked”), it gives you an empty string when the attribute exists in HTML. However, the checked property in JavaScript returns either true or false, depending on the current state of the element in the DOM.
When to Use Attributes vs. Properties
- You can use attributes to set the values that are defined by the HTML, like data-* attributes.
- You can use the properties to work with the DOM and use JavaScript functions to change the elements.
Examples:
Using data-* Attributes
<button id="btn" data-action="submit">Click Me</button>
Modifying Properties:
button.textContent = "Submit Form";
console.log(button.getAttribute("textContent"));
Conclusion
You can use the attributes for initial setup and to set the values, and the properties are used to get the current state of the DOM and interact with the elements for modification. You should understand their difference for managing these elements on your web page.
What is the Difference Between Properties and Attributes in HTML? – FAQs
1. What are attributes in HTML?
You can use the attributes to set the value directly in the HTML markup.
2. What are properties in the DOM?
You can use this to get the current state of the element and modify it using JavaScript.
3. How do attributes and properties differ in behavior?
Attributes define the initial state (e.g., value in <input>) and properties to track the real-time changes.
4. Can changing a property affect an attribute?
No, changing a property (e.g., element.value = “newValue”) doesn’t update the corresponding attribute (getAttribute(“value”)).
5. What are Boolean attributes?
Boolean attributes like checked, disabled, and readonly work differently in JavaScript compared to HTML. When used as attributes in HTML, they show up as empty strings if present.