HTML中的数据集简介

HTML中的数据集简介

Dataset属性可以用来更直接地检索数据属性。对于每个自定义的数据属性，该属性都会返回一个只有条目的DOMStringMap对象。HTML元素接口的数据集只读概念给了我们如何读写访问指定元素上的自定义数据属性（data-*）。它提供了一个字符串映射（DOMStringMap），每个数据-*属性都有一个条目。数据集在DOM和HTML中都可用。

语法

语法被声明为

element.dataset.key

这是一个数据集的最小创建。

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

HTML数据集

用户可以使用正常的HTML表格和其他结构化标记作为Spry HTML数据集的数据源。HTML数据集的功能类似于XML数据集，不同的是它们可以利用数以百万计的表格。HTML数据集是Spry框架的一个自然扩展，因为我们将XML平铺成一个表格结构。

HTML数据集自带一套工具，你可以用它来改变它。

• getURL()- 这个函数返回数据集中当前URL的值 函数 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);

在上面的代码片断中，数据集属性的作用与属性属性相同。这段代码可以使用前缀（如content prefix）来充实，这在将来会有更好的效果。键可以作为数据集的一个对象属性来设置和读取属性，就像元素中的。 dataset.key name。对象属性的括号语法也可以用来设置和读取属性，如 element.dataset[keyname]。in操作符可以用来查看一个属性是否存在。

dataset IDL属性为一个元素的所有data-*属性提供了简单的访问器。获取数据集IDL属性必须返回一个与以下算法相关的DOMStringMap对象，这些算法在其元素上暴露了这些属性。

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

有几件事需要注意:

• 属性名称不再以data-前缀为前缀。
• 名称中任何小写字母前面的连字符都会被消除，后面的字母会被转换为大写。
• 其他的字符将被单独保留。这意味着任何不在小写字母后面的连字符都保持不变。

浏览器支持

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

规格/评论

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

运行下面的算法来获得DOMStringMap:

• 让list是一个空的名-值对的列表。
• 为DOMStringMap关联元素上的每个内容属性添加一个名值对，这些属性的前五个字符是字符串 "data-"，其余字符（如果有）不包括任何ASCII大写字母，按照这些属性在元素属性列表中的顺序排列。

对于一个基本的HTML标准-- 审查评论与最新的HTML5.1没有确切的变化

版本HTML 5 - Review Comment (在以前的标准中没有变化)

版本HTML 5.1-- 与HTML 5没有影响。

结论--HTML中的数据集

最后，自定义数据属性是一种在网页上存储应用数据的便捷方式。HTML5现在允许我们在所有的HTML组件中加入自定义数据属性。在引入这些属性之前，实现类似结果（将数据与元素关联）的唯一关键是在元素中使用CSS类。