HTML 格式的資料集-html教學-PHP中文網

HTML 格式的資料集

王林

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

原創

228 人瀏覽過

資料集屬性可用於更直接地檢索資料屬性。對於每個自訂資料屬性，此屬性傳回一個僅包含條目的 DOMStringMap 物件。 HTML 元素介面的資料集唯讀概念為我們提供如何讀取/寫入存取指定元素上的自訂資料屬性 (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 的名稱-值對：