This content originally appeared on DEV Community and was authored by Joanna
In this post we'll discuss how DOM object properties relate to HTML attributes.
Properties and attributes.
The browser first parses the HTML before creating DOM objects from it when the page is loaded. The majority of common HTML attributes for element nodes are converted into DOM object properties automatically.
For example:
<div id="container"></div>
Becomes:
div.id="container";
Attribute methods
A live collection of the attributes that are currently available for a given element is provided by the element.attributes property.
<div id ="container"></div>
const container = document.getElementById("container");
container_attributes = container.attributes;
console.log(container.attributes);
for(let att of container_attributes) {
console.log(att.name, att.value);
}
The element.getAttribute(name) property allows you to get the attribute value.
The element.setAttribute(name, value) property allows you to set the value for the attribute
The element.hasAttribute(name) property allows you check for the existence of an attribute
The element.removeAttribute(name) property allows you to remove the attribute
propert-attribute synchronization
With some exceptions, whenever a standard attribute is updated, the corresponding property is also automatically updated.
<input type="email" id="email" tabindex="1">
let input = document.getElementById('email');
input.setAttribute('tabindex', 2);
console.log(input.tabIndex); // 2
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3
However, there are exceptions. For example, input.value only synchronizes from attribute to property, not the other way around.
<input type="email" id="email">
let input = document.getElementById('email');
input.setAttribute('value', 'text');
// the value was updated to text
console.log(input.value); //text
input.value = 'newValue';
//the value was not updated to newValue
console.log(input.getAttribute('value'));//text
An attribute's value is always a string. The property value, however, can be a string, a boolean, an object, etc. when the attribute is transformed into a property of a DOM object.
Let's look at an example
<input type="checkbox" id="check" checked> True
let input = document.getElementById('check');
console.log(input.getAttribute('checked')); //empty string
console.log(input.checked);//true
The checked attribute is present in the checkbox element. The checked attribute becomes a boolean value when it is converted to the property.
Custom attributes
It is possible to create custom attributes. If you want to add a custom attribute to an element, your attribute should be prefixed with data-[your-custom-attribute-name] since data attributes are reserved for developer uses.
Custom attributes can be used to "mark" HTML elements for JavaScript or to pass specific data from HTML to JavaScript.
<div id="order" class="order" data-product-order="new">
A new product order.
</div>
Using data attribute to style our div
.order[data-product-order="new"] {
color: green;
}
.order[data-product-order="pending"] {
color: blue;
}
.order[data-product-order="canceled"] {
color: red;
}
What if we modify our data attribute value to pending
order.dataset.productOrder = "pending";
This content originally appeared on DEV Community and was authored by Joanna
Joanna | Sciencx (2023-03-06T21:49:54+00:00) JavaScript Tutorial Series: HTML attributes & DOM object properties.. Retrieved from https://www.scien.cx/2023/03/06/javascript-tutorial-series-html-attributes-dom-object-properties/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.