How to Get data Attribute Using JavaScript

Data attributes in HTML offer a powerful way to store extra information on standard, semantic elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData(). JavaScript provides a convenient approach to access these values, simplifying dynamic data handling in web applications. Understanding how to “javascript get data attribute” is crucial for modern web development.

Understanding the Basics

Before diving into the technicalities, let’s understand what data attributes are. In HTML, any attribute that starts with data- is a data attribute. It allows you to store extra information on HTML elements which you can easily access in CSS or JavaScript.

Example Scenario

Imagine you have an HTML list of books, where each item has data attributes representing the book’s ISBN and the author’s name:

  <li data-isbn="978-3-16-148410-0" data-author="John Doe">Book 1</li>
  <li data-isbn="978-4-16-148410-1" data-author="Jane Doe">Book 2</li>

Accessing Data Attributes in JavaScript

To access these data attributes in JavaScript, you use the dataset property of the DOM element.

Basic Example

Let’s write a function to alert the ISBN and author of a book when it’s clicked:

document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', function() {
    alert('ISBN: ' + this.dataset.isbn + ', Author: ' +;

Deep Dive into the Dataset Property

The dataset property on a DOM element provides access to all the data- attributes set on it. This property is an object containing all data attributes as properties.

Converting Attribute Names

The JavaScript conversion of data- attributes to dataset is noteworthy. Attributes like data-example-name become dataset.exampleName in JavaScript, following the camelCase convention.

Advanced Usage of Data Attributes

Beyond simple retrieval, data attributes can be used for more complex tasks like configuring JavaScript components or storing state information.

Dynamic Content Update Example

Consider a scenario where you need to update a user’s status dynamically:

<span data-user-id="102" data-user-status="active">John</span>
document.querySelector('span').addEventListener('click', function() {
  this.dataset.userStatus = (this.dataset.userStatus === 'active' ? 'inactive' : 'active');

FAQs on JavaScript Data Attributes

What are data attributes in HTML and how are they accessed in JavaScript?

Data attributes are custom attributes to store extra information in HTML elements. In JavaScript, access them using the dataset property.

Can I modify data attributes using JavaScript?

Yes, you can both get and set data attributes using the dataset property in JavaScript.

How do I handle dashed names in data attributes in JavaScript?

Dashed names in data attributes are converted to camelCase in JavaScript. For example, data-example-name becomes dataset.exampleName.

Is it possible to retrieve all data attributes from an element in JavaScript?

Yes, the dataset property provides an object containing all data attributes of an element.

What are the benefits of using data attributes in JavaScript?

Data attributes offer a clean and efficient way to store and retrieve additional information directly within HTML elements, enhancing dynamic content manipulation.


In conclusion, mastering the use of data attributes in JavaScript opens up a plethora of possibilities for web developers, allowing for more dynamic, efficient, and interactive web applications. By understanding how to retrieve and manipulate these attributes using the dataset property, developers can efficiently store and manage additional information directly within HTML elements. This not only streamlines the development process but also enhances the user experience by enabling more responsive and data-driven interactions in web applications. With the guidance provided in this article, leveraging data attributes in JavaScript should now be a straightforward and valuable skill in your web development toolkit.

Leave a Comment