Skip to content
Related Articles

Related Articles

How to get the data attributes of an element using JavaScript ?

Improve Article
Save Article
  • Last Updated : 08 Dec, 2021
Improve Article
Save Article

In this article, we will learn to get the element’s data attribute in Javascript. Given an HTML document and the task is to select the data attributes of an element using JavaScript. There are a few methods to solve this problem which are given below:

We will discuss both the ways to get the data attribute of an element.

Approach:

  • First, select the element which is having data attributes.
  • We can either use the dataset property to get access to the data attributes or use the .getAttribute() method to select them by specifically typing their names.

Here, in the below examples, we will use the getElementById() method that will return the elements havingthe given ID which is passed to the function. The parseInt() function is used that will accept the string ,radix parameter and convert them into an integer. The JSON.stringify() method is used to create a JSON string out of it. This method is helpful for the conversion of an object to a string.

Example 1: This example uses dataset property to get the data attributes of an element.

HTML




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to get the data attributes
        of an element using JavaScript ?
    </title>
</head>
 
<body align="center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <p id="GFG_UP"
       style="font-size: 15px;
              font-weight: bold;">
    </p>
 
  
    <span data-typeId="123"
          data-name="name"
          data-points="10"
          data-important="true"
          id="span">This is the Element.
     
    <br>
    <br>
    <button onclick="GFG_Fun()"> click here </button>
    <p id="GFG_DOWN"
       style="font-size: 20px;
              font-weight: bold;
              color:green;">
    </p>
 
 
    <script>
    var el_up = document.getElementById('GFG_UP');
    var el_down = document.getElementById('GFG_DOWN');
    var input = document.getElementById('span');
    el_up.innerHTML = "Click on the button to get "
        + "the data attributes of element.";
 
    function GFG_Fun() {
        var jsonData = JSON.stringify({
            id: parseInt(input.dataset.typeid),
            points: parseInt(input.dataset.points),
            important: input.dataset.important,
            dataName: input.dataset.name
        });
        el_down.innerHTML = jsonData;
    }
    </script>
</body>
 
</html>

Output:

dataset Property

Example 2: This example uses the .getAttribute() method to get the data attributes of an element.

HTML




<!DOCTYPE HTML>
<html>
 
<head>
    <title>
        How to get the data attributes
        of an element using JavaScript ?
    </title>
</head>
 
<body align="center">
    <h1 style="color:green;"
        GeeksforGeeks 
    </h1>
    <p id="GFG_UP"
       style="font-size: 15px;
              font-weight: bold;">
    </p>
 
 
    <span data-typeId="123"
          data-name="name"
          data-points="10"
          data-important="true"
          id="span">This is the Element.
     
    <br>
    <br>
    <button onclick="GFG_Fun()"> click here </button>
    <p id="GFG_DOWN"
       style="font-size: 20px;
              font-weight: bold;
              color:green;">
    </p>
 
 
     
    <script>
    var el_up = document.getElementById('GFG_UP');
    var el_down = document.getElementById('GFG_DOWN');
    var input = document.getElementById('span');
    el_up.innerHTML = "Click on the button to get "
        + "the data attributes of element.";
 
    function GFG_Fun() {
        var jsonData = JSON.stringify({
            id: parseInt(input.getAttribute('data-typeId')),
            points: parseInt(input.getAttribute('data-points')),
            important: input.getAttribute('data-important'),
            dataName: input.getAttribute('data-name')
        });
        el_down.innerHTML = jsonData;
    }
    </script>
</body>
 
</html>

Output:

.getAttribute() Method


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!