<div id="myDiv" data-name="John" data-age="24"></div>

元素上定義了兩個自定義data屬性：data-name和data-age。這些屬性將數(shù)據(jù)附加到元素上，以便在JavaScript中輕松訪問它們。
獲取data屬性值
要獲取元素上存儲的數(shù)據(jù)，我們可以使用以下JavaScript代碼行：

var myDiv = document.getElementById("myDiv");
var name = myDiv.dataset.name;
var age = myDiv.dataset.age;

這里我們首先獲取了表格參考，然后通過使用dataset屬性獲取存儲在元素上的數(shù)據(jù)。該dataset屬性返回一個以“ data-”為前綴的字符串的對象，其名稱對應于每個設置的數(shù)據(jù)屬性。因此，我們可以使用dataset.name和dataset.age獲取名字和年齡的值。
更改data屬性值
要更改元素上存儲的數(shù)據(jù)，我們可以使用以下代碼：

var myDiv = document.getElementById("myDiv");
myDiv.dataset.name = "David";
myDiv.dataset.age = "28";

這里我們仍然獲取了參考的表格，然后使用dataset屬性更改存儲在元素上的數(shù)據(jù)。這將覆蓋原始值，并將其更新為在代碼中指定的新值。
使用data-*屬性可以很方便的在HTML元素上存儲數(shù)據(jù)，因為在這些屬性中所存儲的值是純文本，所以存儲的數(shù)據(jù)不會立即暴露給用戶。數(shù)據(jù)的存儲位置直接在HTML代碼中，并不會增加服務器訪問或帶寬的壓力。
總而言之，數(shù)據(jù)屬性是在JavaScript中實現(xiàn)數(shù)據(jù)存儲的非常簡單和方便的方法，前端開發(fā)人員可以很快而方便地編寫代碼。無論是存儲數(shù)據(jù)還是查詢數(shù)據(jù)，JavaScript中的data用法都提供了簡單易用的解決方案。