JavaScript - How to Get the Data Attributes of an Element?
Last Updated :
26 Nov, 2024
Improve
Here are the various methods to get the data attributes of an element using JavaScript
1. Using dataset Property
The dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data stored in attributes like data-id or data-name.
Syntax
const e = document.getElementByID('demo') // Accessing the element
const dataId = e.dataset.dataID //Access the data-id attribute
<!DOCTYPE html>
<html>
<body>
<div
id="element"
data-typeId="123"
data-name="name"
data-points="10"
data-important="true">
This is the Target Element.
</div>
<br />
<button onclick="myFunction()">
Get Attributes
</button>
<p id="result"></p>
<script>
let result = document.getElementById("result");
let e = document.getElementById("element");
function myFunction() {
let jsonData = JSON.stringify({
id: parseInt(e.dataset.typeid),
points: parseInt(e.dataset.points),
important: e.dataset.important,
dataName: e.dataset.name
});
result.innerHTML = jsonData;
}
</script>
</body>
</html>
<html> <body> <div id="element" data-typeId="123" data-name="name" data-points="10" data-important="true"> This is the Target Element. </div> <br /> <button onclick="myFunction()"> Get Attributes </button> <p id="result"></p> <script> let result = document.getElementById("result"); let e = document.getElementById("element"); function myFunction() { let jsonData = JSON.stringify({ id: parseInt(e.dataset.typeid), points: parseInt(e.dataset.points), important: e.dataset.important, dataName: e.dataset.name }); result.innerHTML = jsonData; } </script></body> </html>Output
2. Using getAttribute() Method
The getAttribute() method in JavaScript retrieves the value of a specified attribute from an HTML element. To get data attributes, use element.getAttribute('data-attribute'). This method allows precise selection and manipulation of individual data attributes without accessing all at once.
<!DOCTYPE html>
<html>
<body>
<div
id="target"
data-typeId="123"
data-name="name"
data-points="10"
data-important="true"
>
This is the Target Element.
</div>
<br />
<button onclick="myFunction()">Get Attributes</button>
<p id="result"></p>
<script>
let result = document.getElementById("result");
let e = document.getElementById("target");
function myFunction() {
let jsonData = JSON.stringify({
id: parseInt(e.getAttribute('data-typeId')),
points: parseInt(e.getAttribute('data-points')),
important: e.getAttribute('data-important'),
dataName: e.getAttribute('data-name')
});
result.innerHTML = jsonData;
}
</script>
</body>
</html>
<html> <body> <div id="target" data-typeId="123" data-name="name" data-points="10" data-important="true" > This is the Target Element. </div> <br /> <button onclick="myFunction()">Get Attributes</button> <p id="result"></p> <script> let result = document.getElementById("result"); let e = document.getElementById("target"); function myFunction() { let jsonData = JSON.stringify({ id: parseInt(e.getAttribute('data-typeId')), points: parseInt(e.getAttribute('data-points')), important: e.getAttribute('data-important'), dataName: e.getAttribute('data-name') }); result.innerHTML = jsonData; } </script></body> </html>Output
