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 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 having the given ID which is passed to the function. The parseInt() function is used that will accept the string, and radix parameters 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;"> neveropen </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> let el_up = document.getElementById('GFG_UP'); let el_down = document.getElementById('GFG_DOWN'); let input = document.getElementById('span'); el_up.innerHTML = "Click on the button to get " + "the data attributes of element."; function GFG_Fun() { let 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;"> neveropen </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 thecElement. </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> let el_up = document.getElementById('GFG_UP'); let el_down = document.getElementById('GFG_DOWN'); let input = document.getElementById('span'); el_up.innerHTML = "Click on the button to get " + "the data attributes of element."; function GFG_Fun() { let 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
