HTMLElement

HTMLElement.prototype.dataset

Provides read/write access to custom data attributes (data-*) set on the element as a DOMStringMap

Syntax

JavaScript
element.dataset

Return Value

A DOMStringMap of all data-* attributes

Examples

Basic Usage
const el = document.querySelector('[data-user-id]') as HTMLElement
console.log(el.dataset.userId)
Practical Example
const card = document.querySelector('.card') as HTMLElement
card.dataset.status = 'active'
card.dataset.priority = 'high'
console.log(card.dataset)
Advanced Usage
function getConfig(el: HTMLElement) {
  return {
    theme: el.dataset.theme || 'light',
    lang: el.dataset.lang || 'en',
    debug: el.dataset.debug === 'true'
  }
}

Understanding HTMLElement.prototype.dataset

The HTMLElement.prototype.dataset method in JavaScript provides read/write access to custom data attributes (data-*) set on the element as a DOMStringMap. It belongs to the HTMLElement object and is one of the most widely used methods for working with htmlelement values in modern JavaScript and TypeScript applications.

The method signature is element.dataset. When called, it returns a domstringmap of all data-* attributes. Understanding when and how to use dataset() helps you write more expressive, readable code.

Common use cases for HTMLElement.prototype.dataset include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-setattribute, dom-getattribute, dom-hasattribute, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for HTMLElement.prototype.dataset is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.

Browser Compatibility

Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.

Related Methods

Element.prototype.setAttribute

Sets the value of an attribute on the specified element, adding it if it does not already exist

Element.prototype.getAttribute

Returns the value of a specified attribute on the element, or null if the attribute does not exist

Element.prototype.hasAttribute

Returns a boolean value indicating whether the specified element has the specified attribute or not

More HTMLElement Methods

Other methods in the HTMLElement object

HTMLElement.prototype.styleHTMLElement.prototype.offsetWidthHTMLElement.prototype.clientHeightHTMLElement.prototype.focusHTMLElement.prototype.blurHTMLElement.prototype.clickView all →

Related Tools

All JS MethodsRegex TesterJSON FormatterAPI Request BuilderURL Query ParserEpoch Converter

More HTMLElement Methods

style()offsetWidth()clientHeight()focus()blur()click()

Explore JavaScript Methods

Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.

ArrayStringObjectMathDatePromiseJSONNumberRegExpMapSetConsoleGlobal / Window