Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 05 Sep, 2019
Geek Week

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :