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

08 Dec, 2021
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:
Using the dataset property
Using .getAttribute() method
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
bhaskargeeksforgeeks
sweetyty
JavaScript-Questions
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?