Accessing data-* with dataset in JavaScript
Read and write custom data attributes via the dataset API.
Accessing data-* with dataset in JavaScript is a free HTML Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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.
Reading Values
Read a data attribute: const id = el.dataset.userId. All dataset values are strings — convert numeric values with Number() or parseInt() as needed. Undefined attributes return undefined, not null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Writing Values
Set a data attribute through dataset: el.dataset.state = "active". This creates or updates the data-state HTML attribute. The attribute change is reflected in the DOM immediately and can be observed by MutationObserver.
Deleting Values
Delete a data attribute: delete el.dataset.userId. The corresponding data-user-id attribute is removed from the element. You can also use el.removeAttribute("data-user-id") for explicit removal.
Iterating dataset
dataset is a DOMStringMap — iterate it with a for...in loop or spread into Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). This is useful for batch-reading all data attributes on an element.
Using dataset for Component State
Store lightweight component state in data attributes instead of hidden inputs or JavaScript variables. A tab component stores the active tab index in data-active-tab on the container, readable by any script without a shared variable.
Event Delegation with dataset
In a list of items, attach one click listener to the container. On click, read the clicked target's dataset: e.target.closest("[data-id]").dataset.id. One listener handles all items without per-item binding overhead.
dataset vs Custom Properties
Use dataset for data that needs to be readable from HTML (server-rendered metadata, accessible to CSS selectors). Use JavaScript variables for ephemeral runtime state that doesn't need HTML visibility. Mixing both adds unnecessary complexity.
Type Coercion Caution
dataset always returns strings. el.dataset.active === true is always false — compare with el.dataset.active === "true" or convert: el.dataset.active === "true". Boolean state stored in dataset requires string comparison.
dataset vs getAttribute
Both read data attributes. dataset is more convenient for camelCase access; getAttribute requires the full attribute name including the "data-" prefix. Prefer dataset in modern code; use getAttribute when iterating non-data attributes alongside data attributes.
Knowledge Check
How does the data-user-id HTML attribute appear in the JavaScript dataset object?
Summary
The dataset API maps data-* attributes to camelCase JavaScript properties for easy read/write/delete access. It enables component state storage, event delegation patterns, and server-to-client data passing without hidden inputs or global variables.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Accessing data-* with dataset in JavaScript” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Accessing data-* with dataset in JavaScript”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “Accessing data-* with dataset in JavaScript”?
Read and write custom data attributes via the dataset API. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “Accessing data-* with dataset in JavaScript” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- data-* Syntax and Naming Conventions
- Accessing data-* with dataset in JavaScript
- Using data-* with CSS attribute selectors
- Real-world Patterns Tooltips State Tracking