nodeDatasetAttributes

Prefer using element.dataset over getAttribute/setAttribute for data-* attributes.

✅ This rule is included in the browser logical preset.

The dataset property provides a more convenient and cleaner API for working with data-* attributes on DOM elements. It automatically converts between kebab-case attribute names and camelCase property names, making the code more readable and less error-prone.

Examples

❌ Incorrect

element.getAttribute("data-foo");
element.setAttribute("data-foo", "bar");
element.removeAttribute("data-foo");
element.hasAttribute("data-foo");

✅ Correct

element.dataset.foo;
element.dataset.foo = "bar";
delete element.dataset.foo;
"foo" in element.dataset;

Options

This rule is not configurable.

When Not To Use It

If you need to support very old browsers that don’t have the dataset property (IE 10 and below), you may need to use the traditional attribute methods. For modern web applications, the dataset property is widely supported and preferred.

Further Reading

• MDN: HTMLElement.dataset
• MDN: Using data attributes

Equivalents in Other Linters

• ESLint: unicorn/prefer-dom-node-dataset
• Oxlint: unicorn/prefer-dom-node-dataset