Access data-* attributes from the Event object in JavaScript

# Access data-* attributes from the Event object

Use the target.dataset property to access data attributes from the event object.

The dataset property provides read and write access to the custom data attributes of the element.

The property returns a Map of strings that can be converted to an object.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <button id="btn" data-site="bobbyhadz.com">Click</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  // 👇️ DOMStringMap {site: 'bobbyhadz.com'}
  console.log(event.target.dataset);

  // 👇️ "bobbyhadz.com"
  console.log(event.target.getAttribute('data-site'));
});

get data attribute from event

The code for this article is available on GitHub

We attached a click event listener to a button.

When the button is clicked, the callback function gets passed an event, on which we can access the button element via the target property.

We accessed the dataset property on the event.target object to get a Map of strings that contains the data attributes of the button element.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  // 👇️ {bar: 'bobbyhadz.com'}
  console.log(event.target.dataset);

  // 👇️ "bobbyhadz.com"
  console.log(event.target.getAttribute('data-site'));
});

The property returns a read-only Map of strings containing the custom data attributes of the element.

# Updating a data-* property

The dataset property itself is read-only. If you need to update a specific property, you must access the nested property.

index.js

Copied!
console.log(el.dataset.id); // 👉️ "example"

el.dataset.id = 'updated id';

console.log(el.dataset.id); // 👉️ "updated id"

The code for this article is available on GitHub

To update the data-site attribute, access the site property on the dataset object and assign a new value to it.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  console.log(btn.dataset.site); // 👉️ "bobbyhadz.com"

  btn.dataset.site = 'google.com';

  console.log(btn.dataset.site); // 👉️ "google.com"
});

update dataset property from event object

# Converting the DOM string Map to a JS object

If you need to convert the DOM string Map to a native JavaScript object, you can use the spread syntax (...).

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  const map = event.target.dataset;

  const obj = {...map};
  console.log(obj); // 👉️ {site: 'bobbyhadz.com'}
});

The code for this article is available on GitHub

# Access data-* attributes from the Event using `getAttribute`

An alternative approach, which allows you to get any attribute on the DOM element is to call the getAttribute() method on the specific element.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', event => {
  const attr = event.target.getAttribute('data-site');
  console.log(attr); // 👉️ "bobbyhadz.com"

  console.log(event.target.getAttribute('id')); // 👉️ "btn"
});

Notice that when passing an attribute name to the getAttribute method, we have to provide the complete name, including the data- part.

As opposed to when accessing a property on the dataset map, where the data- part is excluded.

If the attribute is not found on the DOM element the getAttribute method will return null or an empty string.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Access data-* attributes from the Event object in JavaScript