自定義數(shù)據(jù)屬性（例如data-roles =“ button”）用于將額外信息存儲在HTML元素中，以便通過JavaScript更輕松地訪問。它們允許開發(fā)人員將相關(guān)數(shù)據(jù)的少量數(shù)據(jù)直接連接到元素上，例如項目ID（數(shù)據(jù)ID），臨時狀態(tài)（data-state =“ Active”）或配置設(shè)置（Data-Options）。這些屬性有助于避免保持單獨(dú)的JavaScript數(shù)據(jù)結(jié)構(gòu)，并且在動態(tài)UI中特別有用。 1。他們使用CSS選擇器（例如document.queryselectorall）簡化元素選擇（'[data-role =“ tab”]'）。 2。數(shù)據(jù)集屬性提供了一種標(biāo)準(zhǔn)化的方法來訪問JavaScript中的值，將Data-User-ID轉(zhuǎn)換為element.dataset.userid。 3。雖然不適合大規(guī)?；蛎舾械臄?shù)據(jù)存儲，但它們提供了一種安全的，符合標(biāo)準(zhǔn)的方法，可以無縫連接HTML和JavaScript以滿足輕量級需求。

當(dāng)您看到具有諸如data-role="button"或data-user-id="123"屬性的HTML標(biāo)簽時，它不僅是隨機(jī)代碼 - 背后有明確的目的。這些稱為自定義數(shù)據(jù)屬性，它們用來存儲HTML元素內(nèi)部的額外信息，從而有效且易于從JavaScript訪問。

將數(shù)據(jù)與元素聯(lián)系在一起

使用data-*屬性的主要原因之一是將相關(guān)數(shù)據(jù)的一小部分直接連接到元素。例如，如果您在頁面上有一個用戶卡列表，則可以將每個用戶的ID存儲在data-user-id屬性中。這樣，當(dāng)有人單擊卡片時，您的JavaScript可以快速抓住該ID，而無需在其他地方查找它。

這有助于避免您需要在JavaScript中維護(hù)單獨(dú)的數(shù)據(jù)結(jié)構(gòu)的情況，以跟蹤哪些元素與哪些數(shù)據(jù)相對應(yīng)。它在動態(tài)UI中尤其有用，在動態(tài)UI中，頻繁添加或刪除元素。

一些常見用途：

• 存儲項目ID（ data-id ）
• 保持臨時狀態(tài)（ data-state="active" ）
• 附加配置設(shè)置（ data-options='{ "speed": "fast" }' ）

使JavaScript選擇更容易

另一個很大的好處是它們?nèi)绾闻cCSS選擇器和JavaScript合作。由于它們遵循標(biāo)準(zhǔn)格式，因此您可以使用querySelectorAll根據(jù)其數(shù)據(jù)值選擇元素。例如：

 document.queryselectorall（'[data-role =“ tab”]'）

這使得僅針對您關(guān)心的元素而無需依靠班級名稱或其他出于樣式原因而改變的屬性變得簡單。

另外，由于命名始于data- ，因此您不必?fù)?dān)心與現(xiàn)有或?qū)淼腍TML屬性沖突。這是添加自己的元數(shù)據(jù)的安全，標(biāo)準(zhǔn)化的方法。

以標(biāo)準(zhǔn)方式訪問數(shù)據(jù)

HTML5引入了一個簡潔的快捷方式，用于通過JavaScript： dataset屬性訪問這些值。如果您有一個帶有data-user-id="789"元素，則可以這樣閱讀：

 element.dataset.userid //返回“ 789”

請注意，屬性名稱是data-之后的駱駝，因此data-user-id成為userId 。這種內(nèi)置方法使使用自定義數(shù)據(jù)屬性在現(xiàn)代瀏覽器中清潔且一致。

您通常會在框架或庫中看到它，以將初始配置或元數(shù)據(jù)傳遞到組件中，而無需額外的AJAX調(diào)用或全局變量。

使用data-*屬性并不總是用于大規(guī)模數(shù)據(jù)存儲或復(fù)雜應(yīng)用程序狀態(tài)的最佳解決方案 - 這就是JavaScript對象和狀態(tài)管理工具的目的。但是，對于輕巧的，特定于元素的數(shù)據(jù)需求，它們是符合標(biāo)準(zhǔn)的可靠選擇。請記住， data-*中存儲的任何東西都是公開的，并且在源中可見，因此它不應(yīng)包含敏感信息。

基本上就是這樣。不是魔術(shù)，只是一種更平穩(wěn)地連接HTML和JavaScript的實(shí)用工具。

以上是在HTML標(biāo)簽上使用數(shù)據(jù) - *屬性的目的是什么？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！