dataset api_element.dataset API

dataset api

A while back I showed you the awesome classList API, which allows simple addition, removal, and toggling of CSS classes without the need for parsing the className.  Another simple API available in FireFox Aurora Firefox 6, at time of print and Chrome 8 is the element.dataset API.  This tiny API allows developers to get and set data- attribute values on HTML elements.   Let's take a look at how it works!

不久前 ，我向您展示了很棒的classList API ，该API允许简单地添加，删除和切换CSS类，而无需解析className。 在FireFox Aurora Firefox 6中，在打印和使用Chrome 8 时，另一个可用的简单API是element.dataset API 。 这个微小的API允许开发人员获取和设置HTML元素上的数据属性值。 让我们看看它是如何工作的！

As you know, you can add information to HTML elements using custom data- attributes.  You can name these data- attributes however you'd like.  There are a few rules for working with the dataset API:

如您所知，您可以使用自定义数据属性将信息添加到HTML元素。 您可以根据需要命名这些数据属性。 有一些使用数据集API的规则：

• element.dataset cannot be referenced directly -- you will receive an error
  无法直接引用element.dataset-您将收到一个错误
• You reference data- property names by camel-casing their attribute names
  您可以通过驼峰式命名属性名称来引用数据属性名称
• The name cannot start with xml
  名称不能以xml开头
• The name cannot contain uppercase letters
  名称不能包含大写字母

Assume the following element is within the page:

假设页面中包含以下元素：

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

To retrieve the data-id attribute value, you'd code:

要检索data-id属性值，您需要编写以下代码：

// Get the element
var element = document.getElementById("myDiv");

// Get the id
var id = element.dataset.id;

To retrieve the data-my-custom-key attribute, you'd code:

要检索data-my-custom-key属性，您需要编写代码：

// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;

Assigning the value to a custom attribute you would look like:

将值分配给自定义属性，您将看起来像：

// Sets the value to something else
element.dataset.myCustomKey = "Some other value";

// Element would be:
//		<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>	

If a data- attribute you programmatically set does not exist, it will be created:

如果以编程方式设置的数据属性不存在，则将创建它：

// Set new data- attribute
element.dataset.mootoolsFtw = "true";

// Element would be:
//		<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value" data-mootools-ftw="true"></div>

It probably goes without saying but you cannot store objects within element.dataset without serializing them first.  I'm not aware of dataset length restrictions but storing large sets of data via dataset will make for a bloated DOM which would be difficult to debug.  I do think this little nugget is useful though!

也许不用说，但是如果不先序列化对象，就不能在object.dataset中存储对象。 我不知道数据集的长度限制，但通过数据集存储大量数据将使膨胀的DOM难以调试。 我确实认为这个小块很有用！

翻译自: https://davidwalsh.name/element-dataset

dataset api