How to get the data attributes of an element using JavaScript ?
Given an HTML document and the task is to select the data attributes of an element using JavaScript. There are few methods to solve this problem which are discussed below:
Approach:
- First, select the element which is having data attributes.
- We can either use dataset property to get access to the data attributes or use .getAttribute() method to select them by specifically typing their names.
Example 1: This example uses dataset property to get the data attributes of an element.
<!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 > 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:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: This example uses .getAttribute() method to get the data attributes of an element.
<!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 > 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:
-
Before clicking on the button:
-
After clicking on the button: