數(shù)據(jù)集屬性可用于更直接地檢索數(shù)據(jù)屬性。對(duì)于每個(gè)自定義數(shù)據(jù)屬性，此屬性返回一個(gè)僅包含條目的 DOMStringMap 對(duì)象。 HTML Element 接口的數(shù)據(jù)集只讀概念為我們提供了如何讀/寫(xiě)訪問(wèn)指定元素上的自定義數(shù)據(jù)屬性 (data-*)。它提供了一個(gè)字符串映射 (DOMStringMap)，其中每個(gè) data-* 屬性都有一個(gè)條目。數(shù)據(jù)集在 DOM 和 HTML 中都可用。

語(yǔ)法：

語(yǔ)法聲明為

element.dataset.key

這是數(shù)據(jù)集的最小創(chuàng)建。

HTML 數(shù)據(jù)集允許用戶通過(guò)傳統(tǒng)的 HTML 表和其他結(jié)構(gòu)化標(biāo)記訪問(wèn)數(shù)據(jù)。 HTML 數(shù)據(jù)集的功能與 XML 數(shù)據(jù)集類似，不同之處在于它們可以利用已存在的數(shù)百萬(wàn)個(gè)表！ HTML 數(shù)據(jù)集是一個(gè)明顯的擴(kuò)展，因?yàn)槲覀儗?XML 扁平化為表結(jié)構(gòu)。數(shù)據(jù)集是保存數(shù)據(jù)屬性的元素的本機(jī)屬性； IE11+ 和 Chrome 8+ 幾乎不支持。數(shù)據(jù)集項(xiàng)值通常是字符串，盡管 jQuery 的 data() 尊重 提供的類型。數(shù)據(jù)（鍵，值）。 （Dataset 返回 DOMStringMap，而 jQuery 中的 data() 返回 jQuery 對(duì)象。）

HTML 數(shù)據(jù)集

用戶可以使用普通的 HTML 表格和其他結(jié)構(gòu)化標(biāo)記作為 Spry HTML 數(shù)據(jù)集的數(shù)據(jù)源。 HTML 數(shù)據(jù)集的功能與 XML 數(shù)據(jù)集類似，不同之處在于它們可以利用數(shù)百萬(wàn)個(gè)可用的表。 HTML 數(shù)據(jù)集是 Spry 框架的自然擴(kuò)展，因?yàn)槲覀儗?XML 扁平化為表結(jié)構(gòu)。

HTML 數(shù)據(jù)集附帶了一組實(shí)用程序，您可以使用它們來(lái)更改它。

• getURL() – 此函數(shù)返回?cái)?shù)據(jù)集中當(dāng)前 URL 的值 function Object() { [native code] }.
• setURL(“URL”) – 此函數(shù)指定將在數(shù)據(jù)集中使用的新文件的路徑。
• getSourceElementID() – 獲取數(shù)據(jù)集所基于的頁(yè)面元素的 ID。
• setSourceElementID(“theSourceID”) – 此方法用于設(shè)置或更改數(shù)據(jù)源頁(yè)面元素的 ID。
• getRowSelector() 返回當(dāng)前正在使用的 RowSelector。
• setRowSelector(“theRowSelector”) 為數(shù)據(jù)集設(shè)置新的 RowSelector。
• getDataSelector() – 返回當(dāng)前的 DataSeelctor。
• setDataSelector(“theDataSelector”)-為數(shù)據(jù)集設(shè)置新的 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);

在上面的代碼片段中，數(shù)據(jù)集屬性的工作方式與屬性屬性相同?？梢允褂脙?nèi)容前綴等前綴來(lái)豐富此代碼，這些前綴將來(lái)會(huì)更好地工作。鍵可以用作數(shù)據(jù)集的對(duì)象屬性來(lái)設(shè)置和讀取屬性，就像在元素中一樣。數(shù)據(jù)集.鍵名稱。對(duì)象屬性括號(hào)語(yǔ)法也可用于設(shè)置和讀取屬性，如 element 中所示。數(shù)據(jù)集[鍵名]。 in 運(yùn)算符可用于查看屬性是否存在。

數(shù)據(jù)集 IDL 屬性為元素的所有 data-* 屬性提供簡(jiǎn)單的訪問(wèn)器 (data-*/a>)。獲取數(shù)據(jù)集 (dataset/a>) IDL 屬性必須返回與以下算法關(guān)聯(lián)的 DOMStringMap 對(duì)象，這些算法在其元素上公開(kāi)這些屬性：

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

需要注意的幾點(diǎn)：

• 屬性名稱不再帶有 data- 前綴。
• 名稱中所有小寫(xiě)字母前面的連字符都會(huì)被刪除，并且后面的字母會(huì)轉(zhuǎn)換為大寫(xiě)。
• 其他角色將被保留。這意味著任何后面不跟小寫(xiě)字母的連字符保持不變。

瀏覽器支持

該數(shù)據(jù)集并不兼容所有瀏覽器（尤其是早期版本的 Internet Explorer）。讓我們?cè)诒砀裰胁榭锤潞蟮募嫒菪詳?shù)據(jù)：

規(guī)格/評(píng)論

在 HTML5 中，事情發(fā)生了變化，試圖使開(kāi)發(fā)基于標(biāo)準(zhǔn)的主頁(yè)變得更加容易，這應(yīng)該會(huì)產(chǎn)生很大的不同。由于簡(jiǎn)單的基于 XML 的標(biāo)記的學(xué)習(xí)曲線和失敗率太高，因此創(chuàng)建了 data- 屬性作為應(yīng)用此方法的一種方式。重要的是要理解數(shù)據(jù)屬性并不是試圖取代名稱空間或其他任何東西。它們提供“部署”上述功能所需的工具。人們可以使用 HTML 中的數(shù)據(jù)屬性來(lái)實(shí)現(xiàn) RDFa、復(fù)雜的格式，甚至某種類型的命名空間。該規(guī)范最吸引人的一點(diǎn)是，用戶無(wú)需等待任何瀏覽器實(shí)現(xiàn)即可開(kāi)始使用它。我們可以放心，如果用戶今天開(kāi)始在 HTML 元數(shù)據(jù)上使用 data- 前綴，它將在未來(lái)繼續(xù)發(fā)揮作用。

運(yùn)行以下算法來(lái)獲取 DOMStringMap 的名稱-值對(duì)：

• 令 list 為空的名稱-值對(duì)列表。
• 將名稱-值對(duì)添加到 DOMStringMap 關(guān)聯(lián)元素上的每個(gè)內(nèi)容屬性的列表中，該元素的前五個(gè)字符是字符串“data-”，并且其其余字符（如果有）不包含任何 ASCII 大寫(xiě)字母，在將這些屬性排列在元素的屬性列表中。

對(duì)于基本 HTML 標(biāo)準(zhǔn) – 審核評(píng)論與最新 HTML 5.1 沒(méi)有確切的變化

版本 HTML 5?? – 審核評(píng)論（之前的標(biāo)準(zhǔn)沒(méi)有變化）

版本 HTML 5.1 – 不受 HTML 5 的影響。

結(jié)論 – HTML 中的數(shù)據(jù)集

最后，自定義數(shù)據(jù)屬性是在網(wǎng)頁(yè)上存儲(chǔ)應(yīng)用程序數(shù)據(jù)的便捷方法。 HTML5 現(xiàn)在允許我們?cè)谒?HTML 組件中合并自定義數(shù)據(jù)屬性。在引入這些屬性之前，實(shí)現(xiàn)類似結(jié)果（將數(shù)據(jù)與元素關(guān)聯(lián)）的唯一關(guān)鍵是在元素中使用 CSS 類。

以上是HTML 格式的數(shù)據(jù)集的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！