JavaScript - How to Get the Data Attributes of an Element? Last Updated : 26 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Here are the various methods to get the data attributes of an element using JavaScript1. Using dataset PropertyThe 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.Syntaxconst e = document.getElementByID('demo') // Accessing the element const dataId = e.dataset.dataID //Access the data-id attribute HTML <!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> Output 2. Using getAttribute() MethodThe 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. HTML <!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> Output Comment More infoAdvertise with us Next Article How to get custom element attribute data in jQuery ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to get custom element attribute data in jQuery ? Apart from attributes, we can also use custom element attributes. In this article, we will learn how to get the value of a custom attribute in an HTML element using jQuery. What is Attribute? The HTML attribute provides information about the element. It decides the behavior of an element. Examples o 3 min read How To Set Custom Attribute Using JavaScript? In modern web development manipulating HTML elements dynamically is a common requirement. One such task is setting custom attributes on elements to store additional data or metadata. Custom attributes referred to as data attributes allow developers to attach extra information to elements. In this ar 2 min read How to get Attribute Value from XML using JavaScript? To get the attribute values from XML in JavaScript, We can use DOM manipulation or XPath querying and even use regular expressions to efficiently retrieve attribute values from XML documents. Below are the approaches to get attribute value from XML with Java Script: Table of Content Using DOM Parser 3 min read How to Access XML Data via JavaScript ? XML stands for Extensible Markup Language. It is a popular format for storing and exchanging data on the web. It provides a structured way to represent data that is both human-readable and machine-readable. There are various approaches to accessing XML data using JavaScript which are as follows: Tab 2 min read JavaScript- Find the HTML Label Associated with a Given Input Element in JS When working with forms in HTML, labels are commonly used to provide text descriptions for form elements, such as text boxes, checkboxes, and radio buttons.These labels are typically associated with form controls using the for attribute, which links the label to an input element with the correspondi 2 min read JavaScript | Add new attribute to JSON object The task is to add a JSON attribute to the JSON object. To do so, Here are a few of the most used techniques discussed.Example 1: This example adds a prop_11 attribute to the myObj object via var key. html <!DOCTYPE HTML> <html> <head> <title> JavaScript | Add new attribute t 2 min read Like