JAVASCRIPT
Accessing Custom Data Attributes with JavaScript `dataset`
Learn to read and modify custom `data-*` attributes on HTML elements using JavaScript's convenient `dataset` API. Essential for dynamic behavior and storing data.
// HTML: <button id="myButton" data-id="123" data-action="delete">Click me</button>
const myButton = document.getElementById('myButton');
// Get data attributes
const dataId = myButton.dataset.id;
const dataAction = myButton.dataset.action;
console.log('Data ID:', dataId); // Output: 123
console.log('Data Action:', dataAction); // Output: delete
// Set (or add) data attributes
myButton.dataset.status = 'processed';
console.log('New Data Status:', myButton.dataset.status); // Output: processed
// Remove data attributes
delete myButton.dataset.action;
console.log('Action attribute removed:', myButton.dataset.action); // Output: undefined
How it works: This snippet illustrates the use of JavaScript's `dataset` API to interact with custom `data-*` attributes in HTML. It allows developers to store extra information on standard HTML elements without violating HTML standards. The `dataset` property returns a `DOMStringMap` object where each `data-*` attribute (e.g., `data-id`) is accessible as a camelCased property (e.g., `dataset.id`), making it easy to read, set, and delete custom data, which is useful for component logic.