dom-node-dataset.md

dom-node-dataset

📝 Enforce consistent style for DOM element dataset access.

💼 This rule is enabled in the following configs: ✅ recommended, ☑️ unopinionated.

🔧 This rule is automatically fixable by the --fix CLI option.

Use .dataset on DOM elements over getAttribute(…), .setAttribute(…), .removeAttribute(…) and .hasAttribute(…).

The dataset API maps data-* attributes to properties, avoiding repeated attribute-name strings and keeping reads and writes consistent.

Examples

// ❌
const unicorn = element.getAttribute('data-unicorn');

// ✅
const {unicorn} = element.dataset;

// ❌
element.setAttribute('data-unicorn', '🦄');

// ✅
element.dataset.unicorn = '🦄';

// ❌
element.removeAttribute('data-unicorn');

// ✅
delete element.dataset.unicorn;

// ❌
const hasUnicorn = element.hasAttribute('data-unicorn');

// ✅
const hasUnicorn = Object.hasOwn(element.dataset, 'unicorn');

// ✅
const foo = element.getAttribute('foo');

// ✅
element.setAttribute('not-dataset', '🦄');

// ✅
element.removeAttribute('not-dataset');

// ✅
const hasFoo = element.hasAttribute('foo');

Options

preferAttributes

Type: boolean
Default: false

When true, enforces the opposite direction: prefer getAttribute(…) / setAttribute(…) / removeAttribute(…) / hasAttribute(…) over named .dataset access — covering reads, writes, delete, simple destructuring, existence checks (in, Object.hasOwn, .hasOwnProperty()), and assigning .dataset to a variable (const data = element.dataset, which hides the attribute access from a search). Direct whole-object reads (foo(element.dataset)) and inherited members (element.dataset.toString) are not flagged. This can be useful for greppability when data attributes are also referenced in CSS/HTML.

/* eslint unicorn/dom-node-dataset: ["error", {"preferAttributes": true}] */

// ❌
const unicorn = element.dataset.unicorn;

// ✅
const unicorn = element.getAttribute('data-unicorn');

/* eslint unicorn/dom-node-dataset: ["error", {"preferAttributes": true}] */

// ❌
element.dataset.unicorn = '🦄';

// ✅
element.setAttribute('data-unicorn', '🦄');

/* eslint unicorn/dom-node-dataset: ["error", {"preferAttributes": true}] */

// ❌
delete element.dataset.unicorn;

// ✅
element.removeAttribute('data-unicorn');

/* eslint unicorn/dom-node-dataset: ["error", {"preferAttributes": true}] */

// ❌
'unicorn' in element.dataset;

// ✅
element.hasAttribute('data-unicorn');

/* eslint unicorn/dom-node-dataset: ["error", {"preferAttributes": true}] */

// ❌
const data = element.dataset;
console.log(data.unicorn);

// ✅
console.log(element.getAttribute('data-unicorn'));