Working With Data Attributes in JavaScript

Data attributes can be very useful when working on a project that uses JavaScript without a framework. You can use them instead of relying on id or class attributes that are mostly used with CSS, which can often change and break your JavaScript code.

Data attributes can be used to not only find elements in the DOM, but to attach some data to them. In this post, you will learn how to use HTML data attributes in your JavaScript project.

Finding Elements by Data Attribute

You can select an element or all elements on a page by their data attribute.

Let’s say you want to make some elements clickable and select them using JavaScript.

First, you can add a data-clickable attribute to all such elements.

<button data-clickable>Click me</button>

<label for="checkbox">Check me</label>
  <input id="checkbox" type="checkbox" data-clickable />
</label>

Afterwards, use the querySelectorAll method to select all elements with a given data attribute. In this case, look for elements that have a data-clickable attribute.

const clickableElements = document.querySelectorAll('[data-clickable]');

To select just one element, use querySelector method instead. This will select only the first element that has the data-clickable attribute.

const clickableButton = document.querySelector('[data-clickable]');

Another thing you can do is selecting elements with a specific data attribute value.

For example, you can set the data-clickable attribute to different values to distinguish elements from one another.

<button data-clickable="button">Click me</button>

<label for="checkbox">Check me</label>
  <input id="checkbox" type="checkbox" data-clickable="checkbox" />
</label>

You can then select only the elements whose data-clickable attribute value is set to button using the querySelectorAll method.

const clickableButtons = document.querySelectorAll('[data-clickable="button"]');

Similarly, to select just the first element, use querySelector method instead.

const clickableCheckbox = document.querySelector('[data-clickable="checkbox"]');

Getting, Setting and Updating Data Attributes

There are two ways to work with HTML data attributes in JavaScript. You can either use the dataset property or getAttribute and setAttribute methods on an HTML element.

Using dataset Property

You can list all data attributes for a given element by reading the dataset property of an element.

<button
  id="my-button"
  data-is-clicked="false"
  data-click-amount="0"
>
  Click me
</button>

const buttonElement = document.getElementById('my-button');

// { isClicked: "false", clickAmount: "0" }
console.log(buttonElement.dataset);

Keep in mind that attribute values are strings and you will need to cast them to other data types yourself.

And of course, to read a specific data attribute value, you can further access it through the dataset property.

// "false"
console.log(buttonElement.dataset.isClicked);

When accessing data attribute properties via dataset, you need to omit the data- part of the attribute. And, you need to specify the attribute in camel case.

Furthermore, you can use dataset property to add or update data attribute values.

const buttonElement = document.getElementById('my-button');

// Update existing attribute
buttonElement.dataset.clickAmount = '5';

// Add a new attribute
buttonElement.dataset.myCustomAttribute = 'my-value';

The newly added myCustomAttribute will be converted to kebab case, where words are separated by a dash (-).

<button
  id="my-button"
  data-is-clicked="false"
  data-click-amount="5"
  data-my-custom-attribute="my-value"
>
  Click me
</button>

Using getAttribute and setAttribute Methods

Similarly, you can read a data attribute value using getAttribute method.

<button
  id="my-button"
  data-is-clicked="false"
  data-click-amount="0"
>
  Click me
</button>

const buttonElement = document.getElementById('my-button');

// "false"
console.log(buttonElement.getAttribute('data-is-clicked'));

And update or add data attribute values using setAttribute method.

const buttonElement = document.getElementById('my-button');

// Update existing attribute
buttonElement.setAttribute('data-click-amount', '5');

// Add a new attribute
buttonElement.setAttribute('data-my-custom-attribute', 'my-value');

Unlike with dataset, when using getAttribute and setAttribute methods, you have to include the data- part and ensure you use the proper case style yourself.