如何在javascript中轻松访问数据

In Javascript, it can be difficult to access specific data in HTML by traversing the Document Object Model and using that data in your Javascript functions. Introducing, datasets.

在Javascript中，通过遍历文档对象模型并在Javascript函数中使用该数据可能很难访问HTML中的特定数据。 数据集简介。

Dataset is a read-only property of the HTML interface that provides access to all the custom data attributes set on the element. You can store data inside the elements so it can be easily available for a later function.

数据集是HTML界面的只读属性，它提供对元素上设置的所有自定义数据属性的访问。 您可以将数据存储在元素内部，以便以后的功能可以轻松使用。

在HTML中，使用data设置自定义数据集属性， 然后使用custom属性 。 (In HTML, the custom dataset attribute is set by using data- followed by the custom attribute.)

<p class="like-info" data-user-id="1">20 Likes</p>

The name of the dataset must only contain lowercase letters, numbers, dash (-), dot (.), colon (:), or underscore (_). The value of the dataset is also always a string.

数据集的名称只能包含小写字母，数字，破折号(-)，点(。)，冒号(:)或下划线(_)。 数据集的值也始终是字符串。

在Javascript中，使用.dataset设置自定义数据集属性 (In Javascript, the custom dataset attribute is set by using .dataset)

const pTag = document.querySelector(".like-info")pTag.dataset.userId = user.id^element ^attribute ^value// here we are assigning a dataset attribute to the const pTag which is a paragraph element. The dataset attribute is called userId. The value of the dataset attribute is the User object's id

The name of the dataset must contain camelCase or numbers with no dashes, dots, etc.

数据集的名称必须包含camelCase或没有破折号，点等的数字。

It is important to keep in mind that the dataset value will be stored as a string in HTML even if the number saved was an integer.

重要的是要记住，即使保存的数字是整数，数据集的值也将以字符串形式存储在HTML中。

访问数据集值 (Accessing dataset values)

In Javascript, to locate a specific data attribute using querySelector, you will need to enclose “data-attribute=” in brackets.

在Javascript中，要使用querySelector定位特定的数据属性，您需要将“ data-attribute =”括在方括号中。

document.querySelector(`[data-attribute=“${data}”]`)//to find our User's likes<p class="like-info" data-user-id="1">20 Likes</p>let userIdForLikes = document.querySelector(‘[data-user-id=“${user.id}”]’)

There is a much easier way to do this if the syntax above is a bit confusing. You can access the element’s dataset by following the code below.

如果上面的语法有点混乱，有一种更简单的方法可以做到这一点。 您可以按照以下代码访问元素的数据集。

<p class="like-info" data-user-id="1">20 Likes</p>const pTag = document.querySelector(".like-info")//assigns the paragraph tag to a constlet userIdForLikes = pTag.dataset.userId//userIdForLikes will return "1"

改变数据集 (Altering Datasets)

You also have the option to delete a dataset. Using the delete keyword before your custom dataset attribute will result in an undefined value.

您还可以选择删除数据集。 在自定义数据集属性之前使用delete关键字将导致未定义的值。

delete pTag.dataset.userId//Result: pTag.dataset.userId === undefined

There are also instances where you may to alter your dataset value. This is easily done by setting the new value equal to your dataset attribute.

在某些情况下，您可能会更改数据集值。 只需将新值设置为等于数据集属性即可轻松完成。

<p class="like-info" data-user-id="1">20 Likes</p>pTag.dataset.userId = '2'// We've set the dataset attribute of userId to a value of 2

I hope this helps you along on your javascript coding journey!

希望这对您JavaScript编码之旅有所帮助！

Source:

资源：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLOrForeignElement/dataset

翻译自: https://medium.com/@jennifer.yoo7/how-to-access-data-easily-in-javascript-4cd50c0f9811