如何使用HTML5自定義數據屬性（數據 - *）存儲元素上的自定義數據？

如何使用HTML5自定義數據屬性（data-*）將自定義數據存儲在元素上

HTML5自定義數據屬性（以data-為前綴）允許您直接將自定義數據存儲在HTML元素上。這些數據完全是特定於應用程序的，並且不會由瀏覽器本身解釋。關鍵優勢在於，您可以將任意信息與元素相關聯，而無需依靠其他技術或ID等其他技術，這些技術通常具有語義含義。

例如，要將用戶的ID存儲在<div>元素上，您將使用以下語法：<pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div data-user-id=&quot;12345&quot;&gt;This div belongs to user 12345.&lt;/div&gt;&lt;/code&gt;</pre> <p>在這裡， <code>data-user-id是自定義屬性，而“ 12345”是值。您可以在單個元素上具有多個data-*屬性，每個元素都存儲不同的信息。屬性名稱可以是駱駝箱（例如， data-userName ）或snake_case（例如， data-user_name ），但是在您的項目中建議保持一致性。值可以是字符串，數字或布爾值；但是，瀏覽器總是將它們視為字符串，因此，如果您打算將它們用作其他數據類型，則可能需要在JavaScript中解析它們。

Web應用程序中使用HTML5數據屬性的最佳實踐

使用HTML5數據屬性有效地涉及遵循幾種最佳實踐，以確保可維護性和清晰度：

• 有意義的名稱：使用描述性和自稱屬性名稱。例如， data-product-price比data-price好。
• 一致的命名約定：選擇一個命名約定（駱駝或蛇科），然後在整個項目中堅持下去。
• 避免冗餘：請勿存儲HTML中其他位置的數據或可以輕鬆得出的數據。
• 數據分離：使用與元素直接相關的少量數據使用數據屬性。對於大型數據集或複雜結構，請考慮使用JSON或專用數據存儲。
• 名稱空間：如果您預計使用許多數據屬性，請考慮使用名稱空間前綴來避免碰撞（例如，數據應用data-app-userId data-app-userName ）。
• 驗證：雖然不是瀏覽器嚴格執行的，但在服務器端實現驗證，以確保存儲在這些屬性中的數據的完整性。

我可以使用JavaScript訪問和操縱存儲在HTML5自定義數據屬性中的數據嗎？

是的，JavaScript使用DOM元素的dataset屬性可輕鬆訪問自定義數據屬性。

 <code class="javascript">const myDiv = document.querySelector('div[data-user-id]'); const userId = myDiv.dataset.userId; // Accesses the value of data-user-id console.log(userId); // Outputs "12345" //Modifying the data attribute: myDiv.dataset.userName = "John Doe";</code>

dataset屬性提供了一種訪問和修改數據屬性的方便方法。請注意，Camelcase屬性名稱被轉換為dataset集中的駱駝屬屬性（例如， data-user-name為dataset.userName ）。如果屬性不存在，則訪問它將返回undefined 。

HTML5數據屬性與在HTML元素上存儲數據的其他方法有何不同？

與其他方法相比，HTML5數據屬性為存儲數據提供了一種獨特的方法：

• 類和ID：類和ID主要用於使用CSS和JavaScript進行樣式和選擇元素。雖然您可以從技術上使用它們來存儲數據（例如，在類名稱中編碼信息），但由於它不太可讀，更難維護，並且違反了這些屬性的預期目的，因此非常灰心。
• 自定義屬性（非數據 - *）：您可以在沒有data-前綴的情況下添加自定義屬性。但是，這些屬性可能會通過瀏覽器或將來的HTML版本來不同。使用data-*確保將這些屬性視為特定於應用程序的數據並避免潛在的衝突。
• JavaScript變量/對象：將數據專門存儲在JavaScript變量或對像中，可以使數據與HTML分開。這對複雜的數據結構可能是有益的，但使數據與應用程序其他可能無法直接使用JavaScript代碼的部分直接訪問。數據屬性橋接了間隙，提供了一種將數據直接與HTML中元素相關聯的方法，同時仍允許JavaScript訪問。
• 隱藏表單字段：隱藏的表單字段可以存儲數據，但它們主要是為表單提交而設計的，並且可能不適合存儲不直接參與表單處理的數據。

從本質上講，HTML5數據屬性提供了一種輕巧，易於訪問且具有適當的語義機制，可直接將少量應用程序數據存儲在HTML結構中，從而彌合HTML和JavaScript之間的差距。