0Pricing
HTML Academy · Lesson

Accessing data-* with dataset in JavaScript

Read and write custom data attributes via the dataset API.

What is the dataset API?

Every HTML element exposes its data-* attributes via the dataset property — a DOMStringMap that maps attribute names to values without requiring getAttribute() calls.

Attribute to Property Mapping

data-user-id becomes el.dataset.userId. Hyphens in attribute names are converted to camelCase in the dataset property. Accessing data-item-count uses el.dataset.itemCount.

All lessons in this course

  1. data-* Syntax and Naming Conventions
  2. Accessing data-* with dataset in JavaScript
  3. Using data-* with CSS attribute selectors
  4. Real-world Patterns Tooltips State Tracking
← Back to HTML Academy