HTML 格式的数据集-html教程-PHP中文网

HTML 格式的数据集

王林

发布： 2024-09-04 16:15:58

原创

401 人浏览过

数据集属性可用于更直接地检索数据属性。对于每个自定义数据属性，此属性返回一个仅包含条目的 DOMStringMap 对象。 HTML Element 接口的数据集只读概念为我们提供了如何读/写访问指定元素上的自定义数据属性 (data-*)。它提供了一个字符串映射 (DOMStringMap)，其中每个 data-* 属性都有一个条目。数据集在 DOM 和 HTML 中都可用。

语法：

语法声明为

element.dataset.key

登录后复制

这是数据集的最小创建。

HTML 数据集允许用户通过传统的 HTML 表和其他结构化标记访问数据。 HTML 数据集的功能与 XML 数据集类似，不同之处在于它们可以利用已存在的数百万个表！ HTML 数据集是一个明显的扩展，因为我们将 XML 扁平化为表结构。数据集是保存数据属性的元素的本机属性； IE11+ 和 Chrome 8+ 几乎不支持。数据集项值通常是字符串，尽管 jQuery 的 data() 尊重提供的类型。数据（键，值）。（Dataset 返回 DOMStringMap，而 jQuery 中的 data() 返回 jQuery 对象。）

HTML 数据集

用户可以使用普通的 HTML 表格和其他结构化标记作为 Spry HTML 数据集的数据源。 HTML 数据集的功能与 XML 数据集类似，不同之处在于它们可以利用数百万个可用的表。 HTML 数据集是 Spry 框架的自然扩展，因为我们将 XML 扁平化为表结构。

HTML 数据集附带了一组实用程序，您可以使用它们来更改它。

getURL() – 此函数返回数据集中当前 URL 的值 function Object() { [native code] }.
setURL(“URL”) – 此函数指定将在数据集中使用的新文件的路径。
getSourceElementID() – 获取数据集所基于的页面元素的 ID。
setSourceElementID(“theSourceID”) – 此方法用于设置或更改数据源页面元素的 ID。
getRowSelector() 返回当前正在使用的 RowSelector。
setRowSelector(“theRowSelector”) 为数据集设置新的 RowSelector。
getDataSelector() – 返回当前的 DataSeelctor。
setDataSelector(“theDataSelector”)-为数据集设置新的 DataSelector。

示例

获取有效的 HTML 代码

<li class="prod" data-name="Dove Shampoo" data-country="Oslo"
data-lang="js" data-types="Hair">
<b>Hello Users:</b> <span>A newly launched Items</span>
</li>
var u1 = document.getElementsByTagName("li")[0];
var p1 = 0, span = user.getElementsByTagName("span")[0];
var content = [
{name: "country", prefix: "Product exported "},
{name: "type", prefix: "utilizing on hair "},
{name: "lang", prefix: "hello Oslo "}
];
u1.addEventListener("click", function(){
var content = content [ pos++ ];
span.innerHTML = content.prefix + u1.dataset[ content.name ];
}, false);

登录后复制

在上面的代码片段中，数据集属性的工作方式与属性属性相同。可以使用内容前缀等前缀来丰富此代码，这些前缀将来会更好地工作。键可以用作数据集的对象属性来设置和读取属性，就像在元素中一样。数据集.键名称。对象属性括号语法也可用于设置和读取属性，如 element 中所示。数据集[键名]。 in 运算符可用于查看属性是否存在。

数据集 IDL 属性为元素的所有 data-* 属性提供简单的访问器 (data-*/a>)。获取数据集 (dataset/a>) IDL 属性必须返回与以下算法关联的 DOMStringMap 对象，这些算法在其元素上公开这些属性：

<ahref="demo.html#domstringmap-0"> </a>

登录后复制

需要注意的几点：

属性名称不再带有 data- 前缀。
名称中所有小写字母前面的连字符都会被删除，并且后面的字母会转换为大写。
其他角色将被保留。这意味着任何后面不跟小写字母的连字符保持不变。

浏览器支持

该数据集并不兼容所有浏览器（尤其是早期版本的 Internet Explorer）。让我们在表格中查看更新后的兼容性数据：

Support	Versions
Desktop	Chrome	Edge	Firefox	Internet Explorer
Desktop	6 and 8	Yes	6 higher	9
Mobile	Android	Edge	Opera	Samsung
Mobile	6	Yes	Nil	Nil

规格/评论

在 HTML5 中，事情发生了变化，试图使开发基于标准的主页变得更加容易，这应该会产生很大的不同。由于简单的基于 XML 的标记的学习曲线和失败率太高，因此创建了 data- 属性作为应用此方法的一种方式。重要的是要理解数据属性并不是试图取代名称空间或其他任何东西。它们提供“部署”上述功能所需的工具。人们可以使用 HTML 中的数据属性来实现 RDFa、复杂的格式，甚至某种类型的命名空间。该规范最吸引人的一点是，用户无需等待任何浏览器实现即可开始使用它。我们可以放心，如果用户今天开始在 HTML 元数据上使用 data- 前缀，它将在未来继续发挥作用。

运行以下算法来获取 DOMStringMap 的名称-值对：