<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element dataset</title>
</head>
<body onload="init()">
<div id="id-div" data-id="12345" data-name="test dataset" data-obj='{"id": 54321}' data-to-check-attribute>
test dataset
</div>
<div id="id-div-01" data-id="56789" data-name="test dataset 1" data-obj data-to-check-attribute>
test dataset 1
</div>
<script>
let obj = {
id: 'check obj'
}
function init() {
const div = document.getElementById('id-div')
console.log(div.dataset.id) // 12345
console.log(div.dataset['id']) // 12345
console.log(div.dataset.name) // test dataset
console.log(div.dataset['name']) // test dataset
console.log(div.dataset.obj) // {"id": 54321} (string)
console.log(div.dataset['obj']) // {"id": 54321} (string)
console.log(div.dataset.toCheckAttribute) // <empty string>
console.log(div.dataset['toCheckAttribute']) // <empty string>
div.dataset.toCheckAttribute = 'checked'
console.log(div.dataset.toCheckAttribute) // checked
console.log(div.dataset['toCheckAttribute']) // checked
const obj00 = JSON.parse(div.dataset.obj)
console.log(obj00) // Object {id: 54321}
const div1 = document.querySelector("div[data-id='56789'][data-name='test dataset 1']")
console.log(div1.dataset.id) // 56789
div1.dataset.obj = JSON.stringify(obj)
console.log(div1.dataset.obj) // {"id":"check obj"} (string)
}
</script>
</body>
</html>