DOM

How to Work with Data Attributes

Use dataset property to access data-* attributes

Quick Answer (2024 ES6+ Way)

javascript

const element = document.querySelector('.item');
const userId = element.dataset.userId;
element.dataset.status = 'active';

Live Example

javascript

// HTML: <div data-user-id="123" data-role="admin"></div>
const div = document.querySelector('div');

// Read data attributes
console.log(div.dataset.userId);  // "123"
console.log(div.dataset.role);    // "admin"

// Set data attributes
div.dataset.status = 'online';
div.dataset.lastSeen = new Date().toISOString();

// Remove data attribute
delete div.dataset.role;

// Iterate over all data attributes
Object.entries(div.dataset).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

Common Variations

Store JSON

javascript

element.dataset.config = JSON.stringify({ a: 1 });
const config = JSON.parse(element.dataset.config);

getAttribute Alternative

javascript

const value = element.getAttribute('data-user-id');
element.setAttribute('data-status', 'active');

❌ Don't Do This (Outdated Way)

Avoid storing complex objects as strings

javascript

// DON'T DO THIS
element.dataset.user = user.toString(); // "[object Object]"

Browser Support

✓ Works in all modern browsers (IE11+)

#dom#data-attributes#dataset