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

語法：

語法聲明為

element.dataset.key

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

HTML 數(shù)據(jù)集允許用戶通過傳統(tǒng)的 HTML 表和其他結(jié)構(gòu)化標(biāo)記訪問數(shù)據(jù)。 HTML 數(shù)據(jù)集的功能與 XML 數(shù)據(jù)集類似，不同之處在于它們可以利用已存在的數(shù)百萬個表！ HTML 數(shù)據(jù)集是一個明顯的擴(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 對象。）

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

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

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

• getURL() – 此函數(shù)返回數(shù)據(jù)集中當(dāng)前 URL 的值 function Object() { [native code] }.
• setURL(“URL”) – 此函數(shù)指定將在數(shù)據(jù)集中使用的新文件的路徑。
• getSourceElementID() – 獲取數(shù)據(jù)集所基于的頁面元素的 ID。
• setSourceElementID(“theSourceID”) – 此方法用于設(shè)置或更改數(shù)據(jù)源頁面元素的 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)容前綴等前綴來豐富此代碼，這些前綴將來會更好地工作。鍵可以用作數(shù)據(jù)集的對象屬性來設(shè)置和讀取屬性，就像在元素中一樣。數(shù)據(jù)集.鍵名稱。對象屬性括號語法也可用于設(shè)置和讀取屬性，如 element 中所示。數(shù)據(jù)集[鍵名]。 in 運(yùn)算符可用于查看屬性是否存在。

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

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

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

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

瀏覽器支持

該數(shù)據(jù)集并不兼容所有瀏覽器（尤其是早期版本的 Internet Explorer）。讓我們在表格中查看更新后的兼容性數(shù)據(jù)：

規(guī)格/評論

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

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

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

對于基本 HTML 標(biāo)準(zhǔn) – 審核評論與最新 HTML 5.1 沒有確切的變化

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

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

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

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

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