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

Last Updated : 05 Sep, 2019

Given an HTML document and the task is to select the data attributes of an element using JavaScript. There are few methods to solve this problem which are discussed below:

Approach:

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

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

<!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. 
    </span> 
      
    <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:

Before clicking on the button:
After clicking on the button:

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

<!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. 
    </span> 
      
    <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:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles