xxxxxxxxxx
// <div id="element" data-name="john"></div>
const el = document.querySelector('#element')
el.dataset.name // 'john'
xxxxxxxxxx
var element = document.querySelector('.element');
var dataAttribute = element.getAttribute('data-name');
// replace "data-name" with your data attribute name
console.log(dataAttribute);
xxxxxxxxxx
//javascript get html data attribute
<button data-id="1" >Click</button>
<button data-id="2" >Click</button>
<button data-id="3" >Click</button>
const btns=document.querySelectorAll('button[data-id]');
[btns].forEach(btn => console.log(btn.getAttribute('data-id')))
xxxxxxxxxx
<!-- --------------- get value of data attribute in js -->
<!-- this is my div: -->
<div id="show-car" data-car="bmw" ></div>
<!-- SCRIPT -->
<script>
//Get element contains data
const showCar = document.getElementById('show-car');
//dataset get an object and in this object you can get "car" of "data-car"
const bmw = showCar.dataset.car;
// will to display your value of ' "data-car="bmw" ' -> bmw
console.log(bmw)
</script>
xxxxxxxxxx
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
xxxxxxxxxx
<article
id="electric-cars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
…
</article>
xxxxxxxxxx
const article = document.querySelector('#electric-cars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"