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:
Table of Content
Using the dataset property
- 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: 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.
</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
Using .getAttribute() method
- In this approach, we are using .getAttribute() method to get the data attributes of an element.
- we are creating a function and stringify the given data.
- And setting an onclick function in HTML button.
- After the clicking button the function is called and it shows the data on teh screen.
Example: 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 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