JavaScript Tutorial Series: HTML attributes & DOM object properties.
Published: 2023-03-06 21:49:54

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: 

```HTML
<div id="container"></div>
```
Becomes: 

```JavaScript
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. 

```HTML
<div id ="container"></div>
```

```JavaScript
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);
}
```

![element.attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6iahyu4jnr07dtmdgat.png)

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.

```HTML
<input type="email" id="email" tabindex="1">
```

```JavaScript
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.

```HTML
<input type="email" id="email">
```

```JavaScript
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

```HTML
<input type="checkbox" id="check" checked> True
```

```JavaScript
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.

```HTML
<div id="order" class="order" data-product-order="new">
  A new product order.
</div>

```
Using data attribute to style our div
```CSS
  .order[data-product-order="new"] {
    color: green;
  }

  .order[data-product-order="pending"] {
    color: blue;
  }

  .order[data-product-order="canceled"] {
    color: red;
  }
```

![custom attribute data-*](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1px66mi0183o8gnfrvcd.png)

What if we modify our data attribute value to pending 

```JavaScript
  order.dataset.productOrder = "pending";
```

![custom attribute data-*](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ht6ji4upu8k5y1jm8y9.png)