DEV Community

Cover image for JavaScript Tutorial Series: HTML attributes & DOM object properties.
Joanna (Jo)
Joanna (Jo)

Posted on • Updated on

JavaScript Tutorial Series: HTML attributes & DOM object properties.

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>
Enter fullscreen mode Exit fullscreen mode

Becomes:

div.id="container";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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);
}
Enter fullscreen mode Exit fullscreen mode

element.attribute

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">
Enter fullscreen mode Exit fullscreen mode
let input = document.getElementById('email');

input.setAttribute('tabindex', 2);
console.log(input.tabIndex);  // 2

input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3
Enter fullscreen mode Exit fullscreen mode

However, there are exceptions. For example, input.value only synchronizes from attribute to property, not the other way around.

<input type="email" id="email">
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
let input = document.getElementById('check');

console.log(input.getAttribute('checked')); //empty string
console.log(input.checked);//true
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

custom attribute data-*

What if we modify our data attribute value to pending

  order.dataset.productOrder = "pending";
Enter fullscreen mode Exit fullscreen mode

custom attribute data-*

Oldest comments (1)

Collapse
 
yassne profile image
yasu uo

just quick note. We can use the custom attributes in the CSS in ::BEFORE and ::AFTER
like that: content:attr(data-[your-custom-attribute-name);