js 获取html5的data属性实现方法

HTML5中的data属性允许我们在HTML标记中添加自定义数据属性，以便我们在JavaScript代码中使用它们。JavaScript中可以使用getAttribute方法获取HTML标记中的data属性。

例如，如果我们有一个以下HTML元素：

<div id="myDiv" data-id="123" data-name="John Doe">Hello World!</div>

我们可以使用JavaScript中的getAttribute方法来获取data-id和data-name属性的值：

var myDiv = document.getElementById('myDiv');
var id = myDiv.getAttribute('data-id');
var name = myDiv.getAttribute('data-name');

现在，我们可以使用变量id和name来访问该元素的data-id和data-name属性的值。

我们还可以使用dataset属性来访问元素的data属性。这是一种更方便的方法，因为它直接返回JavaScript对象，其中包含元素的data属性及其相应的值。

var myDiv = document.getElementById('myDiv');
var data = myDiv.dataset;

此时，我们可以使用以下代码访问data-id和data-name属性：

var id = data.id; // '123'
var name = data.name; // 'John Doe'

我们还可以使用dataset来设置元素的data属性。例如：

var myDiv = document.getElementById('myDiv');
myDiv.dataset.age = '30';

这将创建一个新的data-age属性，并将其设置为30。现在，我们可以使用以下方法获取它：

var age = myDiv.dataset.age; // '30'

总之，使用JavaScript中的getAttribute和dataset属性可以轻松地访问HTML5中的data属性。它们提供了一种方便的方法来在HTML标记中存储和获取自定义数据。