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>

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";

Comments

[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);