Kieran Barker

Working with data attributes in vanilla JS

In the past, I've written about how to work with attributes in vanilla JS. While these techniques do work with data attributes, there's another way: the HTMLElement.dataset property.

  1. Reading data attributes
  2. Writing data attributes
  3. Deleting data attributes
  4. Checking for data attributes
  5. Browser support
  6. Further information

Reading data attributes

Recently, I've been reliving my childhood by watching Wizards of Waverly Place on Disney+. Much of the show takes place in a subway-themed sandwich shop. It's making me crave a sub, so let's pretend we're placing an order.

Take a look at the following HTML snippet that describes a sandwich. It has data attributes representing the sandwich's length and price.

<div id="sandwich" data-inches="6" data-price="500">
  Sandwich
</div>

Let's select the #sandwich element and check out its dataset property.

const sandwich = document.querySelector('#sandwich');

console.log(sandwich.dataset); // DOMStringMap { inches: '6', price: '500' }

The dataset property references an object with two properties: inches and price. These map to the data-inches and data-price attributes in our HTML.

With that in mind, let's start our order.

// Destructure the `inches` and `price` properties
const { inches, price } = sandwich.dataset;

// Convert the price from cents to dollars
const dollarPrice = parseInt(price, 10) / 100;

// Me: Hi, can I get a 6-inch sub, please?
console.log(`Me: Hi, can I get a ${inches}-inch sub, please?`);

// Cashier: Sure thing, that'll be 5 dollars.
console.log(`Cashier: Sure thing, that'll be ${dollarPrice.toString()} dollars.`);

Writing data attributes

Now we need to decide what we want in our sub. We can make our choices by setting some data attributes.

sandwich.dataset.breadType = 'Italian';

sandwich.dataset.filling = 'meatball';

sandwich.dataset.topping = 'cheese';

If we take a look at the DOM now, we can see that our #sandwich element has these new data attributes. Note that the camelCase breadType property gets converted to the kebab-case bread-type attribute, and vice versa.

<div
  id="sandwich"
  data-inches="6"
  data-price="500"
  data-bread-type="Italian"
  data-filling="meatball"
  data-topping="cheese"
>
  Sandwich
</div>

Let's tell the cashier what we'd like.

// Destructure the `breadType`, `filling`, and `topping` properties
const { breadType, filling, topping } = sandwich.dataset;

// Me: Please can I have a meatball sub on Italian bread with cheese?
console.log(`Me: Please can I have a ${filling} sub on ${breadType} bread with ${topping}?`);

Deleting data attributes

Wait, we've changed our mind. We don't want cheese!

// Tell the cashier we've changed our mind
console.log(`Me: Sorry, I've changed my mind. I don't want any ${topping}.`);

// Delete the `topping` property
delete sandwich.dataset.topping;

Checking for data attributes

We're wearing a mask to prevent the spread of COVID-19. The cashier didn't hear us, so they're not sure if we want cheese or not! Let's help them check.

if (sandwich.dataset.hasOwnProperty('topping')) {
  console.log(`Cashier: Great, I'll add some ${topping} to your sandwich.`)
} else {
  // This line will run
  console.log(`Cashier: OK, no ${topping} for you.`)
}

We deleted the topping property. This means the condition will evaluate to false, so the else block will run. The cashier will confirm that we don't want any cheese.

Browser support

At the time of writing, the HTMLElement.dataset property is supported in all modern browsers except Opera Mini. You can check out the browser support information if you're interested.

Further information

For more information on the techniques used in this article, check out the following pages in the MDN Web Docs.