JavaScript - How to Get the Data Attributes of an Element?

Last Updated : 26 Nov, 2024

Here are the various methods to get the data attributes of an element using JavaScript

1. Using dataset Property

The dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data stored in attributes like data-id or data-name.

Syntax

const e =  document.getElementByID('demo') // Accessing the element 
const dataId  = e.dataset.dataID //Access the data-id attribute

HTML

<!DOCTYPE html>
<html>
  
<body>
    <div
        id="element"
        data-typeId="123"
        data-name="name"
        data-points="10"
        data-important="true">
        This is the Target Element.
    </div>

    <br />
    <button onclick="myFunction()">
      	Get Attributes
  	</button>
    
  	<p id="result"></p>

    <script>
        let result = document.getElementById("result");
        let e = document.getElementById("element");

        function myFunction() {
            let jsonData = JSON.stringify({
                id: parseInt(e.dataset.typeid),
                points: parseInt(e.dataset.points),
                important: e.dataset.important,
                dataName: e.dataset.name
            });
            result.innerHTML = jsonData;
        }
    </script>
</body>
  
</html>

Output

2. Using getAttribute() Method

The getAttribute() method in JavaScript retrieves the value of a specified attribute from an HTML element. To get data attributes, use element.getAttribute('data-attribute'). This method allows precise selection and manipulation of individual data attributes without accessing all at once.